表列中的IE7浮動佈局問題

我可以使用一些來自IE7專家的渲染問題的幫助;我的佈局在除IE7之外的所有瀏覽器上都能很好地工作，而且我無法弄清楚它的神奇風格。問題的表列中的IE7浮動佈局問題

的jsfiddle例子是在這裏：http://jsfiddle.net/rB29C/2/

如果在IE7瀏覽它，鏈接（酒杯圖像）下推到複選框下方的第二線。我的目標是讓他們在同一行中。如果您在IE8 +或任何其他瀏覽器中查看小提琴，則按預期工作。

我認爲它與浮動元素的寬度有關，但我無法弄清魔術風格組合來解決這個問題。我在我的應用程序中有條件樣式表，所以我可以做一個IE7特定樣式，儘管如果可能的話我更喜歡避免基於標記的更改。

我很想知道這是怎麼回事，太 - 這樣我就可以有希望學習如何避免這種情況在未來:)

來源

2012-07-11 Dan

我能弄清楚我的問題的解決方案;我已經更新了的jsfiddle用新的樣式：

http://jsfiddle.net/rB29C/13/

總之，我設置以下附加風格從我原來的小提琴，而IE瀏覽器現在似乎設計，能正確尺寸的東西（包括含TD）：

input.checkbox { 
    display: inline; 
    float: left; 
} 

a.link { 
    display: inline; 
    float: left; 
    clear: right; 
    margin: 0; 
}

希望這有助於別人誰與IE7的奇特奮鬥！

來源

2012-07-12 19:26:47 Dan

我已經想通了解決的辦法是不是在CSS而是HTML。只需將酒杯圖片在不同小區之間，像這樣：

<table> 
<tbody> 
    <tr> 
     <td class="type"> 
      <input class="checkbox" type='checkbox' /> 
     </td> 
      <a class="link" href="#"></a> 
     <td class="name">Name 
     </td> 
     <td class="dates">Dates 
     </td> 
     <td class="score">Score 
     </td> 
    </tr> 
</tbody> 
</table>

這樣做的問題是，它僅適用於IE7的環境，而不是別人。也許你可以用根據頁面是什麼瀏覽器PHP的調理吧。

<?php 
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8) 
?> 
<table> 
<tbody> 
    <tr> 
     <td class="type"> 
      <input class="checkbox" type='checkbox' /> 
     <?php if ($isIE7) echo('</td> 
      <a class="link" href="#"></a>'); 
      else echo(' 
      <a class="link" href="#"></a> 
     </td> ');?> 
     <td class="name">Name 
     </td> 
     <td class="dates">Dates 
     </td> 
     <td class="score">Score 
     </td> 
    </tr> 
</tbody> 
</table>

我不知道，如果你想避免PHP或沒有，但如果你也有一個JavaScript版本我可以曲柄爲你而出。

來源

2012-07-11 20:18:58

謝謝，斯科特！我找到了另一種純粹用CSS的方法，但是我很感激你花時間去尋找解決方案。我們在服務器端使用ASP，所以作爲後備我可以按照您的建議進行操作。 – Dan 2012-07-12 19:19:52

當單元格的寬度太小時，IE7似乎將單元格中的項目推到底部。我把td.type的寬度增加到了14％，它似乎在小提琴中起作用，但是如果你的桌子需要收縮和增長，這可能不是最好的解決方案（如果桌子被擠壓，酒杯會再次落到底部）。否則，你可能會考慮使用設置的像素寬度，而不是％

來源

2012-07-11 20:56:40

謝謝，皮特。我發現了一些類似的東西，只是玩我自己。理想情況下，這個列應該是一個固定的寬度，它需要包含的是圖像，複選框和適當的邊距。話雖如此，小提琴是對我的實際表格的簡化，在我的頁面中，我發現設置像素的寬度與小提琴沒有相同的效果。但是，如果我將它設置爲％，那就是。任何想法是怎麼回事？ – Dan 2012-07-11 21:01:41

表列中的IE7浮動佈局問題

回答

相關問題