带有标签的chrome问题：悬停和相对定位答案

【问题标题】：Issue on chrome with label:hover and relative positioning带有标签的chrome问题：悬停和相对定位
【发布时间】：2012-02-17 08:16:35
【问题描述】：

对于我正在开发的网站的一部分，我正在构建一个价目表......因为它是交互式的，所以我使用复选框类型的输入和标签来制作它；您检查您想要哪些服务，网页会为您提供这些服务的总费用。很简单。

我的问题是风格问题；我正在使用一个将浮动属性设置为右侧的跨度来区分价格和服务描述（价格在 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 中而不是直接定位标签和输入来解决问题，但我觉得这应该可行....

一如既往，感谢您抽出宝贵时间。

【问题讨论】：

我应该强调，正如我在问题中所说，我可以通过再添加一个 div 并将定位移动到该 div 中而不是直接在输入和标签上来解决问题。我的主要问题是为什么会发生这种情况？我的代码的某些部分是否使用了糟糕的设计实践，或者这只是 chrome 的东西？如果是 chrome 问题，我应该提交错误报告吗？

标签： css google-chrome hover positioning css-position

【解决方案1】：

更改以下内容：

span.right
{
position:relative;
left:150px;
}

我相信这就是您正在寻找的效果。

【讨论】：

与 Abood 的回答一样，这确实解决了颜色问题，但代价是无法右对齐文本。我试过扔一个 text-align:right;进入跨度，但这不适用于标签。谢谢你的回答。

【解决方案2】：

您的问题不在于标签位置：相对；看来你的问题是 float:right

我建议你用这种样式替换 span.right

    span.right
    {
        padding-left:100px;
    }

解决此问题的另一种方法是添加 clear:right;到标签：悬停样式

    label:hover
    {
        color:#FF0000; clear:right;
    }

【讨论】：

看来你是对的，替换 float:right 将摆脱 Chrome 上的奇怪颜色，但是设置 padding-left 不会像我想要的那样右对齐文本（在应用程序中，我会有超过 2 个输入）。谢谢你的回答。
我为您找到了一个很好的解决方案，无需替换 span.right 样式，只需添加 clear:right;标记：悬停样式。它会像这样 label:hover { color:#FF0000;明确：对； }
这是一个很好的解决方案！我以前从未使用过 clear 属性，看起来我有一些阅读要做......这确实解决了这个问题，而不会抛出很多额外的 div 标签。