为什么HTML输入元素被浏览器调整大小？

我想在我的网站上做一个简单的搜索表单，并使用输入HTML元素。但它的行为真的很奇怪。为什么HTML输入元素被浏览器调整大小？

无论我在样式中指定了哪种尺寸，它都会被浏览器调整大小。在下面的例子中，我有一个宽度为180px的输入元素，但浏览器将其渲染为147px。：/

你知道可能是什么问题吗？

这里有一个视频例子，下面的代码：http://screencast.com/t/WwqAQDmofhf

<div id="search" style="background-color:#000; height:100px;"> 
    <input style=" background: none repeat scroll 0 0 #FFFFFF; 
        border: medium none; 
        border-radius: 5px 5px 5px 5px; 
        color: #666666; 
        float: left; 
        line-height: normal; 
        margin: 6px; 
        padding: 6px 27px 6px 6px; 
        width: 180px; 
        z-index: 40;" 
      type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" /> 
</div>

来源

2011-08-14 Nebojsa Veron

您的答案中包含的标记和样式似乎可以在jsfiddle中正常工作，在Firebug和Chrome控制台的布局选项卡中显示180px。 http://jsfiddle.net/userdude/T7J3z/ –

哪个浏览器？你有一个文档类型，或者你在怪癖模式下运行？ – tdammers

当我从'<！DOCTYPE html> - // W3C // DTD XHTML 1.0 Strict // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict更改时，它似乎起作用。 '！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”“dtd”>' “ >'？ –

'宽度'的含义取决于页面的框模型。传统宽度包括填充和边框，但标准模型现在排除它们。

如果您的html中没有正确的文档类型，那么大多数浏览器将默认使用传统框模型，而您将剩下一盒147像素。添加一个doctype可以修复它，并强制其他布局符合标准。

<!DOCTYPE html> 
<html><head><body> 
<div id="search" style="background-color:#000; height:100px;"> 
    <input style=" background: none repeat scroll 0 0 #FFFFFF; 
        border: medium none; 
        border-radius: 5px 5px 5px 5px; 
        color: #666666; 
        float: left; 
        line-height: normal; 
        margin: 6px; 
        padding: 6px 27px 6px 6px; 
        width: 180px; 
        z-index: 40;" 
      type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" /> 
</div></body></html>

来源

2011-08-14 19:49:10 Sheepy

这可能与做：

padding: 6px 27px 6px 6px;

右填充的27px左填充+ 6像素+报宽度147px = 180像素

您是否尝试过在浏览器中关闭Javascript？

这是否发生在this的例子？

来源

2011-08-14 19:37:13 Gus

我认为填充是围绕180px的输入？它不应该调整输入大小。 –

为什么HTML输入元素被浏览器调整大小？

回答

相关问题