给定a <select>
和<input>
元素,两者都指定为200px宽:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
Run Code Online (Sandbox Code Playgroud)
一个比另一个更宽1,2,3,4:
这是什么原因?
如果有人能说出理由,也许解决方案是显而易见的,而不是黑客和祈祷.
应用的布局非常合理:
更新1:当我写这个问题时,Chrome从17到19更新了.
更新2:将填充<input>
从1更改为0:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
Run Code Online (Sandbox Code Playgroud)
不会使<input>
200px宽(即不修复它).
更新3: 应用CSS重置:
<!doctype html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0; …
Run Code Online (Sandbox Code Playgroud) 渲染输入文本元素时遇到问题.如果我添加<!doctype html>
到我的文件输入元素被拉伸,我的输入提交按钮不会.我已经在几个不同的浏览器中进行了测试并且它是一致的,所以很可能是我:(.
在示例中,我的文本元素的宽度为304像素.当我删除第一行时,它将以300像素呈现.
例:
<!doctype html>
<html>
<STYLE type="text/css">
*{ margin: 0px; padding: 0px; }
input
{
width: 300px;
}
</STYLE>
<body>
<input/><br/>
<input type="submit">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
有人知道是什么原因引起的,但更重要的是如何解决它?