0

我在 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>​

因此，简而言之，spanandinput应该具有相同的大小，但事实证明，Chrome 以不同的方式呈现元素：

  • 跨度被渲染所以它的实际大小是31px
  • 输入被渲染，所以它的实际大小是23px

经过调查，它看起来像 Chrome 渲染span所以它的“内部”（没有边框和填充）大小是 20 像素，而input渲染所以它的“外部”大小是 20 像素。

在实际应用程序中，控件用于“就地编辑”场景，因此当用户单击跨度时，跨度变为隐藏并且输入显示在其位置上。如您所见，在大小如此不同的情况下，过渡并不顺利。Wjat 的价值在于控件被放置在一个表格单元格中，因此宽度和高度的差异会导致整个表格稍微改变布局。

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

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

所以，其实有两个问题：

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

2 回答 2

1

由于 Chrome 支持 box-sizing，请尝试：

<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-29T15:23:55.847 回答
1

Chromebox-sizing: border-box;默认设置在输入元素和文本区域上。

设置box-sizing: content-box为使它们都表现得像跨度或两者都设置为边界框以使它们表现得像输入。

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

于 2012-11-29T15:27:07.293 回答