CSS - 輸入寬度問題在表格的第

Question

我有一個表，當我在標題中插入一個輸入元素時，它有一個奇怪的樣式問題。它並不精確地輸入中心;相反它在右側偏離2個像素。我有一些應用於表格的Twitter Bootstrap樣式，但我找不到導致問題的一種，因此我認爲這與它沒有任何關係。下面是標記：

<thead> 
    <tr> 
     <th scope="col" style="width: 5%;"> 
      <a href="#">ID</a> 
      <input type="text" value="" class="grid-filter" id="id-filter"> 
     </th> 
    ... 

這裏是問題的一個畫面（以大大放大）：

下面是應用的樣式：

th { 
    width: 15%; 

    a { display: block; } 

    input { 
     height: 15px; 
     line-height: 15px; 
     margin: 0; 
     padding: 5px 0; 
     width: 100%; 
    } 
} 

在圖像上面，我使用Firebug並專注於「ID」錨點。正如你所看到的，錨點正確的居中在th，但由於某種原因，輸入框右側有2個像素。爲什麼是這樣？奇怪的是，這不會影響選擇元素，只會影響輸入元素。

更新：當我設置邊框和輪廓時，Bootstrap的焦點發光也有一個邊框。不知道要覆蓋風格。

Answer 1

編輯：貌似問題是你width屬性。檢查this JSFiddle

HTML：

<table> 
    <thead> 
     <tr> 
      <th scope="col" style="width: 5%;"> 
       <a href="#">ID</a> 
       <input type="text" value="" class="grid-filter" id="id-filter"/> 
      </th> 
     </tr> 
    </thead> 
</table> 

CSS：

a, input {  
    padding: 0; 
    margin 0; 
} 

a { 
    display: block; 
    background: red;  
} 

input { 
    height: 15px; 
    line-height: 15px; 
    /* width: 100%; */ 
} 

table { width: 3em } 

在input默認的width屬性auto，這確實你在這種情況下，想要的東西。