Firefox与Chrome填充

Question

我有一个控件，我试图突出显示它被选中。我正在使用div上的填充和一些定位来实现这一点，以便它围绕控件。我遇到的问题是，荧光笔div上的填充在chrome和firefox中的呈现方式不同。我读过的所有东西都说它们都是一样的，所以这应该不是问题。

铬：

火狐：

这是一个有问题的小提琴： http://jsfiddle.net/5fuGB/1/

.control{
    position: absolute;
    width: 100px;
    height: 20px;
    top: 30px;
    left: 300px;
    z-index: 1;
}

.highlighter{
    background-color: orange;
    position: absolute;
    width: 100%;
    height:100%;
    left: -2px;
    top: -2px;
    padding-right: 8px;
    padding-bottom: 10px;
    z-index: -1;
}

input{
    width: 100%;
    height: 100%;
}

我的Chrome版本： Windows 7上的版本31.0.1650.63 m

我的Firefox版本： Windows 7上的25.0

感谢您提供任何帮助。

Answer 1

我相信您看到的差异是来自用户代理样式表的差异，浏览器有自己的默认样式表，用于呈现input元素之类的内容。在您的情况下，应用于input元素的填充可能存在差异。您应该在padding: 0px;元素上专门设置例如：padding: 1px;或input，然后找出如何使input具有指定的固定{padding 1}}。然后，它将覆盖用户代理样式表设置的样式。

<强>更新

我搬到我的Windows PC上去修理它。使用评论中链接的答案中的一个供应商特定前缀来解决此问题的一种方法是将-moz-padding-end: 6px;添加到.highlighter以补偿浏览器之间填充的差异。

这是一个 jsFiddle 修复了你的问题，脚注，我已经可以告诉你，这可能无法在Chrome for OSX上修复它，这也是Firefox方式。

解决此问题的另一种方法是将-moz-padding-start: 1px; -moz-padding-end: 1px;添加到input，但这样做会以某种方式改变底部填充，这使得Firefox中的内容看起来不像其他修复那样漂亮。< / p>

Answer 2

我会采用不同的方式。我建议不要使用额外的div，而是在输入的焦点状态上使用border-color和box-shadow的组合来实现你想要的效果。

查看此修改过的小提琴：http://jsfiddle.net/5fuGB/2/

Answer 3

我的代码遇到了同样的问题，并修复了它。诀窍是如果你使用display：inline-block那么line-height是有道理的。在调试代码时尝试一下。

Answer 4

你做的不仅仅是必要的。要获得围绕该输入的突出显示，您可以使用：focus

所以它会是这样的：

CSS

input {
    border: 1px solid white;
}

input:focus {
    border: 1px solid orange;
}

这将为输入提供一个白色的“不可见”边框，因此当您单击它时它不会移动输入。它只会将边框颜色更改为橙​​色，以获得您正在寻找的高光效果。

修改 的 刚看到你的评论。我没有代表发表评论，所以我只想补充一下。

如果您没有将输入用作实际输入，那么我只会将它们设为div。默认情况下，输入的呈现方式不同，因此会影响浏览器的一致性。

我还建议在另一个内部尝试这些div并使div最相关。

 Outside Div <------ position:relative;
 Middle Div <------- position: absolute;
 Inner div <-------- position: absolute;

此外，如果您需要一个选定状态但不想要或受输入阻碍，那么我建议使用jQuery根据用户交互修改css。