Firefox对Chrome填充
我有一个控件，当它被选中时，我试图突出显示它。我正在使用div上的填充和一些位置来实现这一点，这样它就包围了控件。我遇到的问题是荧光笔div上的填充在chrome和firefox中呈现不同。我读到的每一篇文章都说，它们呈现的是一样的，所以这不应该是个问题。
铬：
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.63m
我的Firefox版本: 25.0在Windows 7上
谢谢你们能提供的帮助。
回答 3
Stack Overflow用户
发布于 2014-01-08 19:33:11
我会以不同的方式去做。与其使用额外的div，我建议在输入的:焦点状态上使用border-color和box-shadow的组合，以达到您想要的效果。
看看这个修改过的小提琴：http://jsfiddle.net/5fuGB/2/
Stack Overflow用户
发布于 2015-01-13 11:41:50
只是在我的代码中遇到了同样的问题，并且也修正了它。诀窍是，如果您使用显示:内联块，那么行高是有意义的。调试代码时试一试。
Stack Overflow用户
发布于 2014-01-08 19:35:29
你做的比必须做的要多一点。要在输入周围突出显示，可以使用: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。
https://stackoverflow.com/questions/21004695
复制相似问题
腾讯云开发者
