css - IE7 中未对齐的推拉门

Question

我有一个最初设计为针对 IE7 的 Web 应用程序。我正在重新调整 CSS 以使应用程序在最新版本的 Chrome 中呈现，而不会破坏 IE7 用户。我已经修复了整个站点中未对齐的滑动门输入框，但是有一页我无法在 IE7 和 Chrome 中对齐滑动门。设置非常简单：

<span>
    <input type="text" ... />
</span>

在这种情况下，跨度保持滑动门的左盖，输入保持右盖和主体。我将 span 和 input 都设置为具有相同高度且没有边距或填充的内联块。Chrome 钉住了它，它看起来很棒，但 IE7 将输入渲染为比跨度低 1 个像素，如下所示：

需要更多声誉才能发布图片

如果我在输入中添加 -1px 的上边距，则 IE7 会正确呈现该东西，而 Chrome 会使其未对齐。我已经尝试将此实例与应用程序中在 IE7 和 Chrome 中工作的所有其他滑动门输入进行比较，但我无法终生看到这里有什么不同......

以前有人遇到过这样的问题吗？

score 0 · Accepted Answer

几乎可以肯定有更好的方法来解决这个问题，但没有看到它..

class在损坏的部分添加一个input例如“ie7fix”，然后：

/* applies to only ie7 */
*+html .ie7fix {
    margin-top: -1px; 
}

1 回答 1