我在 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 以不同方式呈现元素:
- Span 已渲染，因此它的实际大小为
31px - 输入已呈现，因此它的实际大小为
23px
经调查，看起来 Chrome 渲染了 span，所以它的“内部”(没有边框和填充)大小是 20 px，而 input 被渲染所以它是“外部的” "大小为 20px。
在实际应用中，控件用于“就地编辑”场景，因此当用户单击跨度时，跨度会隐藏，输入会显示在它所在的位置。如您所见，由于尺寸差异如此之大，过渡并不顺利。 wjat的优点是控件放在一个表格单元格中，所以宽度和高度的差异导致整个表格的布局发生了一些变化。
我正在开发一个跨平台应用程序，因此它应该也可以在 IE9 中运行。问题在于 IE 呈现相同大小的 input 和 span，因此页面在 IE 和 Chrome 中看起来完全不同。为了让我的生活更艰难，这些控件由 ASP.NET 服务器控件呈现，并且我只能更改 css。
我在 Win7x64 上使用 Chrome 23.0.1271.91(发布时的最新版本)。
所以，实际上有两个问题:
- 我该如何解决这个问题？
- 为什么会这样？我错过了一些明显的东西吗？这是预期的行为吗？
最佳答案
Chrome 在输入元素和文本区域上默认设置 box-sizing: border-box;。
设置 box-sizing: content-box 使它们都表现得像 span 或两者都设置为 border-box 使它们表现得像输入。
可以在此处找到有关调整框大小方法的很好的解释:http://www.quirksmode.org/css/box.html
关于html - Chrome 渲染错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13628832/