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

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

Моя проблема стилистическая; Я использую диапазон со свойством float, установленным справа, чтобы различать цену и описание услуги (цена выравнивается по правому краю внутри div, описание выравнивается по левому краю рядом с флажком). Вся метка позиционируется с относительным позиционированием. Когда я устанавливаю псевдокласс hover для изменения цвета метки, изменение цвета, похоже, не работает должным образом в хроме. Ниже приведен небольшой пример кода, который воспроизводит проблему...

<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>

If you try this example on Chrome, I believe you should notice very odd hover behavior... However, this seems to work fine in Firefox and Internet explorer. Is this a bug with chrome? Is this poor coding on my part? My actual page validates.... I would appreciate it if someone who understands this problem would explain what is going on. I know I can make a work-around by moving the relative positioning into a div and placing all my inputs and labels in that div instead of positioning the labels and inputs directly, but I feel as though this SHOULD work....

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


google-chrome css hover css-position positioning
person bowens    schedule 24.01.2012    source источник
comment
Я должен подчеркнуть, что, как я уже сказал в своем вопросе, я могу получить обходной путь, добавив еще один div и переместив позиционирование в этот div, а не непосредственно на ввод и метку. Мой главный вопрос здесь: ПОЧЕМУ это происходит? Есть ли какая-то часть моего кода, использующая плохую практику проектирования, или это просто хромированная штука? Если это проблема с Chrome, должен ли я отправить отчет об ошибке?   -  person bowens    schedule 24.01.2012

Ответы (2)


arrow_upward
0
arrow_downward

Ваша проблема не в метке position:relative; Кажется, ваша проблема с float:right

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

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

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

    label:hover
    {
        color:#FF0000; clear:right;
    }
person Aboodred1    schedule 24.01.2012
comment
Кажется, вы правы в том, что замена float:right избавит от странной окраски в Chrome, однако установка padding-left не выравнивает текст по правому краю, как хотелось бы (и в приложении у меня будет гораздо больше, чем 2 ввода). Спасибо за ваш ответ. - person bowens; 24.01.2012
comment
Я нашел для вас отличное решение без замены стиля span.right, просто добавьте clear:right; для метки: стиль наведения. Это будет выглядеть так: метка hover { color:#FF0000; ясно: правильно; } - person Aboodred1; 24.01.2012
comment
Это отличное решение! Я никогда раньше не использовал свойство clear, похоже, мне нужно кое-что прочитать... Это решает проблему, не добавляя много дополнительных тегов div. - person bowens; 24.01.2012

arrow_upward
0
arrow_downward

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

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

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

person rtd1123    schedule 24.01.2012
comment
Как и в случае с ответом Абуда, это действительно решает проблему с цветом за счет невозможности выравнивания текста по правому краю. Я попытался бросить text-align:right; в диапазон, но это не работает на метке. Спасибо за ваш ответ. - person bowens; 24.01.2012