Chrome渲染错误

我在Chrome中渲染出一种奇怪的不一致。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应该具有相同的大小，但事实证明，那镀铬使得不同的元素：

跨度呈现所以它的实际大小是31px
输入呈现所以它的实际大小23px

经调查后，它看起来像Chrome的渲染span所以它的“内在”（无边框和填充），大小为20像素，而input呈现所以它是“外”大小是20像素。

在实际应用中，这些控件被用于“就地编辑”场景中，因此当用户单击跨度时，跨度变为隐藏，输入显示在其位置上。正如你所看到的，由于规模如此不同，转换并不顺利。 Wjat的价值在于控件放置在一个表格单元中，所以宽度和高度的差异会导致整个表格改变布局。

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

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

所以，THRE两个问题实际上是：

我该如何解决这个问题？
为什么发生这种情况？我错过了明显的东西吗？这是一种预期的行为吗？

来源

2012-11-29 J0HN

Chrome的默认输入元素和文字区域设置box-sizing: border-box;。

设置box-sizing: content-box使它们的行为都像跨度或两个边界框，以使它们的行为像输入。

有关箱上浆方法一个很好的解释可以在这里找到：http://www.quirksmode.org/css/box.html

来源

2012-11-29 15:27:07

非常感谢，这解决了这个问题。此外，该链接相当有帮助。 – J0HN

不客气。祝你好运！ –

由于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/

来源

2012-11-29 15:23:55 chrisgonzalez

答案是有益的，但如果你不运行的jsfiddle箱上浆它显示了同样的结果。这就是为什么我使用了pastebin :) – J0HN

Chrome渲染错误

回答

相关问题