对于我正在处理的网站的一部分，我正在构建价目表...因为它是交互式的，所以我使用复选框类型的输入和标签来制作它；你检查你想要的服务，网页会告诉你这些服务的总费用。很简单。
我的问题是风格问题；我正在使用 float 属性设置为右的跨度来区分价格和服务描述(价格在 div 中右对齐，描述在复选框旁边左对齐)。整个标签使用相对定位。当我设置悬停伪类来更改标签的颜色时，颜色更改在 chrome 上似乎无法正常工作。下面是一个复制问题的小代码示例...
<html>
<head>
<style type="text/css">
div#leftcolumn
{
width:500px;
}
span.right
{
float:right;
}
input, label
{
position:relative;
left:50px;
}
label:hover
{
color:#FF0000;
}
</style>
</head>
<body>
<div id="leftcolumn">
<input id="option1" type="checkbox" /><label for="option1">This is a label... span class="right">and this is the same label</span></label><br/>
<input id="option2" type="checkbox" /><label for="option2">A new label!<span class="right">Y U NO COLOR RIGHT</span></label>
</div>
</body>
如果您在 Chrome 上尝试这个示例，我相信您应该会注意到非常奇怪的悬停行为......然而，这似乎在 Firefox 和 Internet Explorer 中运行良好。这是 Chrome 的错误吗？这是我的编码不好吗？我的实际页面验证....如果有人了解这个问题会解释发生了什么，我将不胜感激。我知道我可以通过将相对定位移动到一个 div 并将我所有的输入和标签放在该 div 中而不是直接定位标签和输入来解决这个问题，但我觉得这应该有效......
一如既往，感谢您的宝贵时间。
最佳答案
您的问题不在于标签 position:relative; 看来你的问题是 float:right
我建议你用这种风格替换span.right
span.right
{
padding-left:100px;
}
解决这个问题的另一种方法是添加 clear:right;标签:悬停样式
label:hover
{
color:#FF0000; clear:right;
}
关于css - 带有标签 :hover and relative positioning 的 chrome 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8980821/