Question

我写了一个小脚本，每当需要相应的输入字段时，标签就会移开。

请在此处查看：http://jsfiddle.net/5nZWJ/68/

问题是：它在Firefox中运行正常，但我尝试过的所有其他浏览器（Chromium，Internet Explorer和其他浏览器）都没有保持底部边界的合理性（很难解释但是如果你尝试的话你会看到它它出来了。

我需要更改以使所有浏览器中的这个内容看起来像在Firefox中一样吗？

提前谢谢！

Answer 1

我已经解决了你的问题。它现在在所有浏览器中都很流畅：http://jsfiddle.net/5nZWJ/70/

关键是#formWrapper绝对位于底部。这意味着当高度增加时，它会从下向上扩展，而不需要从顶部重新计算位置。

<强> CSS：

#wrapper {
    background-color: lightblue;
    height: 110px;
    width: 500px;
    position:relative; /* Allows absolute figures to be predictable */
}

#formWrapper {
    background-color: yellow;
    border-bottom: 4px solid red;
    bottom: 29px; /* Changed from top and new measurement added */
    left: 120px;
    height: 57px;
    position: absolute;
    z-index: 1;
    width: 108px;
}

<强> JavaScript的：

我删除了涉及该位置的所有代码行，因为它不再需要更改或重新计算。

Answer 2

我认为这可能与不同浏览器计算边框像素的方式有关

http://ejohn.org/blog/sub-pixel-problems-in-css/

（实际上并不是同样的问题，但你有所了解）

我建议您在元素周围添加 div 包装，而不是使用边框，背景颜色设置为边框颜色，填充设置为边框宽度。

移动标签在Firefox中看起来不错 - 在其他浏览器中不太好如何更改？

2 个答案: