IE中的IE7角落

我已經在兩邊添加了角，但在IE7上他們不會出現。即使最糟糕的是，當我使用ie（F12）的「Insepctor」，並從頁面中刪除任何商品（簡單地再次渲染頁面）時，它們突然顯現！IE中的IE7角落

WTF ??

<thead> 
    <tr> 
     <th class="process_table_top" colspan="2"> 
      <div class="corner-2 trp"></div> 
      <div class="corner-2 tlp"></div> 
     <strong>Personal Details</strong> 
     </th> 
     </tr> 
</thead>

CSS：

.corner-2.tlp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -18px; width: 5px; height: 4px; top:5px;left:5px;position:absolute;} 
.corner-2.trp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -27px; width: 5px; height: 5px; top:5px;right:5px;position:absolute;}

來源

2011-02-07 WEBProject

你的背景位置值在左上角和右上角看起來很奇怪。您還希望表格/容器具有position：relative;應用。 – reisio 2011-02-07 07:19:21

我做過了，代碼很醜，因爲它嘗試了很多方法來處理這個問題，所有的問題都回來了 - IE7拒絕渲染背景圖片。 – WEBProject 2011-02-07 07:23:31

當你指定position:absolute;你還需要指定父元素有position:relative; - 在你的情況下，這將是<th>元素。

如果不指定position:relative;父元素，該元素position:absolute;將它從下向上元素有position:relative; DOM樹定位，一路攀升到<body>元素。

因此，解決方法是在您的<th>元件上放置position:relative;。

您尚未指定您製作的「角落」是否爲「圓角」品種？如果這就是你想要做的，那麼爲什麼不扔掉角落圖形的圓角。有很多更好的方法來做到這一點。

現在做圓角的標準方法是使用CSS3樣式border-radius。這在除IE以外的所有瀏覽器中都符合標準。你可能知道這一點，但你顯然需要它在IE中工作。好消息是，有很多黑客可以使border-radius風格適用於IE。

我的最愛是CSS3Pie。非常容易使用，並且您不必擔心HTML代碼中的任何額外標記或圖形。

希望有所幫助。

來源

2011-02-07 09:45:14 Spudley

IE 7有一些報價侵略性緩存開發和測試時有時會導致意外的行爲。您可能應該使用Ctrl + F5強制重新加載而不使用緩存，或在重新加載之前清除緩存。

來源

2011-02-07 07:11:56 GolezTrol

回答

相關問題