關於鍍鉻標籤的問題：懸停和相對定位

對於我正在處理的網站的一部分，我構建了一個價目表......由於它是交互式的，因此我使用複選框類型輸入和標籤來製作這個;你檢查你想要的服務，並且網頁給你這些服務的總成本。很簡單。關於鍍鉻標籤的問題：懸停和相對定位

我的問題是風格化的;我正在使用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中。這是一個鉻的錯誤？我的這個編碼很差嗎？我的實際頁面驗證....如果有人瞭解這個問題，我將不勝感激，可以解釋發生了什麼。我知道我可以通過將相對定位移動到div中，並將所有輸入和標籤放在該div中而不是直接定位標籤和輸入來實現解決方法，但我覺得這應該可以工作....

一如既往，感謝您的時間。

來源

2012-01-24 bowens

我要強調的是，我在我的問題說，我可以扔在一個多格，直接輸入移動定位到該分區，而不是讓全能工作和標籤。我在這裏的主要問題是爲什麼會發生這種情況？我的代碼中是否有一部分使用了糟糕的設計實踐，或者這只是一件鉻合金事情？如果這是一個鉻問題，我應該提交一個錯誤報告嗎？ – bowens

您的問題不在於標籤位置：相對; 看來你的問題浮動：正確的

我建議你用這種風格

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

另一種方式來解決這個問題，以取代span.right是添加明確：權利;標註：hover樣式

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

來源

2012-01-24 01:12:53 Aboodred1

看來你是正確的，取代浮法：右將擺脫奇怪的着色在Chrome上，但設置填充左側不正確的文本，因爲我想（我在應用程序中，我會有很多超過2輸入）。謝謝您的回答。 – bowens

我找到了一個很好的解決方案，無需替換span.right樣式，只需添加明確：右側;標籤：懸停式。它會像這樣的標籤：hover {color：＃FF0000;明確：右; } – Aboodred1

這是一個很好的解決方案！我從來沒有使用清除屬性，看起來像我有一些閱讀要做...這確實解決了這個問題，而沒有投入很多額外的div標籤。 – bowens

更改如下：

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

我相信這是你要找的效果。

來源

2012-01-24 01:08:24 rtd1123

與Abood的回答一樣，這確實能夠解決顏色問題，但代價是不能正確對齊文本。我試過扔文本對齊：正確;進入跨度，但這不適用於標籤。謝謝您的回答。 – bowens

關於鍍鉻標籤的問題：懸停和相對定位

回答

相關問題