Проблема с хромом с меткой: зависание и относительное расположение - PullRequest
Новая
       32

Проблема с хромом с меткой: зависание и относительное расположение

0 голосов
/ 24 января 2012

Для части сайта, над которой я работаю, я создаю прайс-лист ... Так как он должен быть интерактивным, я использую входные данные и метки типа флажка, чтобы сделать это; Вы проверяете, какие услуги вам нужны, и на веб-странице указывается общая стоимость этих услуг. Достаточно просто.

Моя проблема стилистическая; Я использую интервал со свойством float, установленным вправо, чтобы различать цену и описание услуги (цена выравнивается по правому краю внутри 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>

Если вы попробуете этот пример на Chrome, я думаю, вы должны заметить очень странное поведение при наведении курсора ... Однако в Firefox и Internet Explorer это работает нормально. Это ошибка с хромом? Это плохое кодирование с моей стороны? Моя действительная страница подтверждает ... Я был бы признателен, если бы кто-то, кто понимает эту проблему, объяснил бы, что происходит. Я знаю, что могу обойти, переместив относительное позиционирование в div и поместив все свои входы и метки в этот div вместо непосредственного позиционирования меток и входов, но я чувствую, что это ДОЛЖНО работать ....

Как всегда, спасибо за потраченное время.

Ответы [ 2 ]

0 голосов
/ 24 января 2012

Ваша проблема не с позицией ярлыка: относительная; Кажется, ваша проблема с float: right

Я рекомендую вам заменить span.right на этот стиль 

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

еще один способ решить эту проблему - добавить clear: right; на этикетке: стиль наведения 

    label:hover
    {
        color:#FF0000; clear:right;
    }
0 голосов
/ 24 января 2012

Измените следующее: 

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

Я считаю, что это эффект, который вы ищете.

...