帶1px邊框的浮動網格 - 在某些瀏覽器寬度的IE9中，水平邊框消失

Question

我創建了一個浮動圖像網格，其中圖像設置爲100％，並且它們之間有1px邊框。這個問題似乎只發生在IE9中......如果你慢慢調整瀏覽器的大小，你會到達水平邊框消失的地步。這裏的測試：http://zerostatic.com/float_grid/

CSS：

*{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
ul{ 
    width:100%; 
} 
li{ 
    list-style:none; 
    float:left; 
    width:33.333333333%; 
} 
.li-inner{ 
    border:1px solid red; 
    margin-left: -1px; 
    margin-top: -1px; 
} 
img{ 
    width:100%; 
} 

HTML：

<ul> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
      <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
     <li> 
      <div class="li-inner"> 
       <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a> 
      </div> 
     </li> 
    </ul> 

Answer 1

你的問題是雙重的：

1. 首先，你不使用任何類型的重置該頁面的CSS。這意味着你要對每個瀏覽器進行大量猜測。有無數的CSS重置在那裏，他們都很好。我建議你從這三個選擇中選擇：Iain MacDonand's Strppd,Eric Meyer's Reset或HTML5 Starter Pack中的重置，這基本上是一個廣泛的HTML5版本的Strppd
2. 第二，是的，IE在計算時有點厚非整數值，這就是爲什麼我作爲在這短短的Paul Irish post