В раскрывающемся списке html ‹select› в Opera отсутствует отступ

В IE9, Firefox и Chrome мои выпадающие списки выглядят великолепно. Но в Opera не хватает 2-3 пикселей отступа, а у меня есть формы с односимвольными записями в этих меню, и это выглядит плохо.

Пробел с обеих сторон заставит его выглядеть хорошо, но он будет выглядеть плохо в остальных браузерах, а также испортит мои скрипты.


html css opera
person Steven Lu    schedule 25.09.2011    source источник
comment
Не могли бы вы создать страницу jsfiddle или дать нам ссылку, чтобы увидеть проблему?   -  person hallvors    schedule 29.09.2011

Ответы (3)


arrow_upward
2
arrow_downward

Без кода сложно сказать.

Однако вы можете использовать jQuery для работы только с Opera:

if($.browser.opera){
    $('select').css(//DO WHATEVER);
}

Это оставит другие браузеры нетронутыми.

Fwiw... Я бы проверил вашу статистику посетителей. Использование Opera может быть настолько низким или отсутствовать, что исправления могут быть ненужными.

person Jason Gennaro    schedule 25.09.2011

arrow_upward
0
arrow_downward

Я только что создал это для обнаружения устройств iOS:

138     (function () {
139         // ios detection (select menus are ugly)
140         if (navigator.userAgent.toLowerCase().search('iphone') != -1 || navigator.userAgent.toLo    werCase().search('ipod') != -1 || navigator.userAgent.toLowerCase().search('ipad') != -1 ) {
141             // set css rule for input
142             var style = document.createElement('style');
143             style.setAttribute('type','text/css');
144             style.innerHTML = 'select{ color: #333; }'; // custom css for select on ios
145             document.getElementsByTagName('head')[0].appendChild(style);
146         }
147     })();

Думаю, я мог бы сделать то же самое для Opera.

Что касается исходной проблемы, я сделал новый сайт, чтобы проверить проблему:

1  <head><style type='text/css'>
2  select {
3     background-color: #353535;
4     border: 2px solid #555555;
5     color: #c0c0c0;
6  }
7  </style></head><body>
8  <select>
9     <option>0</option>
10 </select></body>

Что происходит, так это то, что когда я устанавливаю стили, которые изменяют границу ИЛИ цвет фона для выбора, он меняется с аккуратно выглядящего стиля выпадающего меню на старомодную более квадратную кнопку, а также избавляется от некоторых дополнений. Однако никто не использует Opera, поэтому я, вероятно, никогда не успею «исправить» проблему.

person Steven Lu    schedule 27.09.2011

arrow_upward
0
arrow_downward

Спасибо за демонстрацию. Добавление определенных стилей в SELECT имеет побочные эффекты, похоже на ошибку макета. Как насчет того, чтобы добавить что-то вроде этого:

    width: 2em;
    text-align:center;

? Я не тестировал его в других браузерах, но я думаю, что он должен просто «усилить» их рендеринг по умолчанию.

person hallvors    schedule 31.10.2011