自定義選擇和輸入標籤，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重置規則。

就個人而言，我不會試圖讓它們在所有瀏覽器中看起來相同相同 - 這是不可能的。我只是在不同的瀏覽器中測試它們，並確保它們在每個瀏覽器中都是可顯示的（它們工作）。

您可能會發現它有用的使用方法：

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

也許inherit其他規則，但試圖格式化選項元素是有問題的。

This article進一步討論了使用CSS風格表單元素的問題。