Question

我正在尝试在我的网站上创建一个简单的搜索表单，并且我正在使用输入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>

Answer 1

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

如果你的html中没有正确的doctype，那么大多数浏览器会默认使用传统的盒子模型，你会留下一个147px的盒子。添加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>

Answer 2

这可能与：

有关

padding: 6px 27px 6px 6px;

27px右填充+ 6px左填充+ 147px报告宽度= 180px

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

是否在this示例中发生了？

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

2 个答案: