IE проблема со стилемэлемент - PullRequest
Новая
       0

IE проблема со стилемэлемент

0 голосов
/ 31 октября 2011

Рассмотрим следующую разметку HTML: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>search/master</title>
        <style type="text/css">
            select{
                background-color: pink;
            }
            option{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <p>
            <select>
                <option>one........</option>
                <option>two........</option>
            </select> 
        </p>
    </body>
</html>

Вывод на FF выглядит следующим образом: (Аналогичный вывод происходит и в Chrome, Safari и Opera)

output on FF & other browsers

Но вывод на IE выглядит следующим образом:

output on IE

Какой надежный и простой способ сделать вывод в IE похож на другие браузеры?

Ответы [ 4 ]

1 голос
/ 31 октября 2011

Если вы определенно хотите это сделать, вы можете использовать фоновое изображение 1px x 1px и установить опцию на :transparent

select{
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
    background: transparent;
}

См. Пример jsfiddle У меня естьсделано для вас

1 голос
/ 31 октября 2011

  • Сначала удалите следующее значение css, оно дает ОПЦИЯМ белый цвет фона и, таким образом, скрывает розовый цвет фона выбора в IE. 

    option {
    background-color: white;
}

  • Во-вторых, всегда заключайте элементы Form в тег Form и Fieldset, как показано ниже: - 

    <form>
<fieldset>
    <select>
        <option>One</option>
    </select>
</fieldset>
</form>

  • Третья форма и набор полей имеют значения по умолчанию и границы, поэтому в css вы можете добавить этот код, чтобы удалить эти значения по умолчанию: 

    form, fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

Таким образом, короче говоря, основная причина того, что IE не отображает окно выбора правильно, заключается в том, что элемент выбора не заключен в FORM и значение белого цвета фона OPTION.

Надеюсь, это поможет.

1 голос
/ 31 октября 2011

Если вы сделаете оба цвета фона (для выбора и опции) розовым, он будет выглядеть одинаково во всех браузерах. Возможно, лучшее решение ... вообще не указывать цвет фона для элемента option ....

0 голосов
/ 24 августа 2015

Проблема возникает, когда мы задаем некоторый цвет фона для параметров внутри элемента select и самого элемента select.

Обходной путь: Применение стиля (background-color) к элементам параметровтолько когда элемент выбора находится в фокусированном состоянии.(только в фокусированном состоянии элемента select мы на самом деле видим элементы option внутри него) 

 select{
     background-color: #f1f1f1;
     ...              
  }

  select:focus > *{
    background-color:#fff;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...