Css 带有标签的chrome上的问题：悬停和相对定位_Css_Google Chrome_Hover_Positioning_Css Position

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

css google-chrome

Css 带有标签的chrome上的问题：悬停和相对定位,css,google-chrome,hover,positioning,css-position,Css,Google Chrome,Hover,Positioning,Css Position,对于我正在工作的网站的一部分，我正在构建一个价目表。。。因为它是交互式的，所以我使用复选框类型的输入和标签来实现这一点；你检查你想要的服务，网页会给出这些服务的总成本。很简单我的问题是文体上的问题；我正在使用一个span，将float属性设置为right，以区分价格和服务描述（价格在div中右对齐，描述在复选框旁边左对齐）。使用相对定位来定位整个标签。当我设置hover伪类来更改标签的颜色时，颜色更改似乎在chrome上无法正常工作。下面是一个复制问题的小代码示例 <html> &

对于我正在工作的网站的一部分，我正在构建一个价目表。。。因为它是交互式的，所以我使用复选框类型的输入和标签来实现这一点；你检查你想要的服务，网页会给出这些服务的总成本。很简单

我的问题是文体上的问题；我正在使用一个span，将float属性设置为right，以区分价格和服务描述（价格在div中右对齐，描述在复选框旁边左对齐）。使用相对定位来定位整个标签。当我设置hover伪类来更改标签的颜色时，颜色更改似乎在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>


div#leftcolumn
{
宽度：500px；
}
对
{
浮动：对；
}
输入、标签
{
位置：相对位置；
左：50px；
}
标签：悬停
{
颜色：#FF0000；
}
这是一个标签。。。span class=“right”>这是同一个标签

一个新标签！你没有颜色对吗

如果你在Chrome上尝试这个例子，我相信你会注意到非常奇怪的悬停行为。。。然而，这在Firefox和Internet explorer中似乎很好地工作。这是chrome的bug吗？对我来说，这是糟糕的编码吗？我的实际页面验证。。。。如果有人了解这个问题，能解释一下发生了什么，我将不胜感激。我知道我可以通过将相对定位移动到一个div中，并将所有输入和标签放置在该div中，而不是直接定位标签和输入，来进行调整，但我觉得这应该是可行的

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

更改以下内容：

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

我相信这就是你想要的效果。

你的问题不在于标签位置：相对；看起来你的浮子问题是：对

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

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

解决这个问题的另一个办法是加上明确的：对；添加标签的步骤：悬停样式

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

看起来你是对的，替换float:right将消除Chrome上奇怪的颜色，但是设置padding left并不能像我希望的那样右对齐文本（在应用程序中，我将有更多的2个输入）。谢谢你的回答。我为你找到了一个很好的解决方案，没有替换span。正确的样式，只需添加清楚的：正确；标签：悬停样式。它将像这样的标签：hover{color:#FF0000；clear:right；}这是一个很好的解决方案！我以前从未使用过clear属性，看起来我有一些阅读要做。。。这确实解决了这个问题，而没有添加很多额外的div标记。正如Abood的回答一样，这确实解决了颜色问题，但代价是无法正确对齐文本。我试着抛出一个文本对齐：对；进入跨度，但这在标签上不起作用。谢谢你的回答。我应该强调的是，正如我在问题中所说的，我可以通过添加一个div，并将定位移动到该div中，而不是直接在输入和标签上。我的主要问题是为什么会发生这种情况？我的代码中是否有部分使用了糟糕的设计实践，或者这只是一个chrome的东西？如果是chrome问题，我应该提交错误报告吗？