Настройка тегов Select And Input, версия IE выглядит ужасно

Question

Я пытаюсь создать строку поиска, выбор категории и поисковый запрос.
Я пытаюсь заставить их смотреть одинаковые шрифты того же размера.
Но я не хочу варианты выглядеть такой же размер, как выберите тег

http://jsfiddle.net/gg8RD/

<table> 
<tr> 
    <td> 
     <div class="searchInput" style="postion:relative"> 
      <select onchange="document.getElementById('category').value = this.options[this.selectedIndex].text"> 
       <optgroup> 
        <option>Cat 1</option> 
        <option>Cat 2</option> 
        <option>Cat 3</option> 
       </optgroup> 
      </select> 
      <input id="category" style="postion:absolute width:300px" placeholder="Choose A Cateogry" value="Choose A Category"> 
     </div> 
    </td> 
    <td> 
     <div class="searchInput"> 
      <input type="text" placeholder="Search Query"> 
     </div> 
    </td> 
</tr> 

div.searchInput input { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 30px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    height: 100%; 
} 
div.searchInput select { 
    border:none; 
    font-size:20px; 
    padding:0px; 
    margin:0px; 
    height:38px; 
    width:300px; 
    color:transparent;position:absolute; 
    background-color:transparent; 
} 
div.searchInput { 
    color:black; 
    background-color: white; 
} 

div.searchInput { 
    overflow: hidden; 
    margin:0px; 
    padding:0px; 
    width:300px; border: 
    1px #000000 solid;} 

body { 
    font-family:Helvetica Neue,Arial,Helvetica, sans-serif; 
    font-size: 16px; 
    background: #666; 
    background:rgba(9,9,9,0.6); 
} 
` 

Это то, что я придумал, и это вокруг стиль и размер, который я хочу.
Но он выглядит ужасно в Internet Explorer.

Почему это? Как я могу заставить их выглядеть одинаково? А если нет: какой у меня следующий путь?

Answer 1

Каждый браузер имеет свои собственные CSS-правила и поведение по умолчанию, это особенно заметно с элементами формы.

Вы можете либо использовать css-reset, чтобы попытаться уравнять все значения по умолчанию в браузере, либо добавить в свой css ряд других правил (высота строки, настройки шрифта, поля и т. Д.) - эффективное создание собственных css-reset rules.

Лично я не пытался заставить их выглядеть идентичным во всех браузерах - это невозможно. Я бы просто тестировал их в разных браузерах и следил за тем, чтобы они были презентабельны (что они работают) в каждом.

Вы можете найти полезным использовать:

select, option, input { font-family: inherit; } 

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

This article далее обсуждает проблемы с использованием элементов стиля css.