Question

我在Chrome中渲染时遇到了一种奇怪的不一致。

可以使用以下代码复制该问题的简化示例：

<html>
<head>
<style>
    input, span {
        border: 1px solid #CCC;
        padding: 3px 4px;
        height: 23px;
        width: 120px;
        display: block;
        font-size: 13px;
    }  
    </style>
</head>
<body>
    <div><span>123</span></div>
    <div><input type='text'/></div>
</body>
</html>

所以，简而言之，span和input应该具有相同的尺寸，但事实证明，Chrome以不同的方式呈现元素：

展示跨度，使其实际尺寸为31px
输入已呈现，因此其实际尺寸为23px

经过调查后，Chrome似乎会呈现span所以内部＆＃34;内部＆＃34; （没有边框和填充）大小是20 px，而input是渲染所以它是＆＃34;外部＆＃34;大小是20px。

在实际应用中，控件用于＆＃34;就地编辑＆＃34;因此，当用户点击跨度时，跨度将变为隐藏状态，输入将显示在其上。如您所见，由于尺寸的这种差异，过渡并不顺畅。 Wjat的价值在于控件放在表格单元格中，因此宽度和高度的差异会导致整个表格略微改变布局。

我正在开发跨平台应用程序，所以它也应该在IE9中运行。问题是IE呈现相同大小的input和span，因此在IE和Chrome中页面看起来很不一样。为了让我的生活更加艰难，这些控件由ASP.NET服务器控件呈现，我只能更改css。

我在Win7x64上使用Chrome 23.0.1271.91（发布时的最新版本）。

所以，实际上有两个问题：

我该如何解决这个问题？
为什么会这样？我错过了一些明显的东西吗这是预期的行为吗？

Answer 1

由于Chrome支持大小调整，请尝试：

<html>
<head>
<style>
    input, span {
        border: 1px solid #CCC;
        padding: 3px 4px;
        height: 23px;
        width: 120px;
        display: block;
        box-sizing:border-box;

    }  
    </style>    
</head>
<body>
    <div><span>123</span></div>
    <div><input type='text'/></div>
</body>
</html>

http://jsfiddle.net/9esTQ/

Answer 2

Chrome默认情况下会在输入元素和textareas上设置box-sizing: border-box;。

设置box-sizing: content-box使它们的行为类似于span或两者的行为，以使它们像输入一样。

关于盒子大小调整方法的一个很好的解释可以在这里找到：http://www.quirksmode.org/css/box.html

Chrome渲染错误

2 个答案: