TD和高度不能在IE

正常工作

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body style="margin: 0px; padding: 0px;"> 
     <table style="width: 600px;"> 
      <tr> 
       <td rowspan="2" style="background: #FF0;">Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp;</td> 
       <td colspan="2" height="30px" style="background: #FCC;height: 30px;">header</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td style="background: #EEE;">Right</td> 
      </tr> 
     </table>   
    </body> 
</html>

它工作在Firefox或Chrome罰款，但IE忽略height屬性及細胞與文本標題不正確的高度。如何解決它？

演示：Fiddle

來源

2013-02-05 user2042869

試試這個代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head> 
<body style="margin: 0px; padding: 0px;"> 
    <table style="width: 600px; height:500px"> 
     <tr> 
      <td rowspan="2" style="background: #FF0;">Left</td> 
      <td colspan="2" height="80px" style="background: #FCC;">header</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td style="background: #EEE;">Right</td> 
     </tr> 
    </table>   
</body> 
</html>

來源

2013-02-05 12:02:17

這是我的任務的不同.. – user2042869

哎其工作... – 2013-02-05 12:20:43

你從左邊TD刪除其他行。如果你添加這個，你會看到，它不工作.. :) – user2042869

使用元素的TD內設置高度，像這樣：

<div style="display:block;height:30px;">header</div>

來源

2013-02-05 12:02:44 Mechzeit

良好的通話，@Spinkzeit。 :) – Jonathan

不，它不起作用:( – user2042869

你確定嗎？我在你的小提琴鏈接測試它，它工作正常。 – Mechzeit

我認爲這會是很好的轉換到DIV和CSS：

<style> 
    #leftPanel { 
     background: #FF0; 
     float: left; 
     width: 135px; 
    } 
    #headerPanel { 
     background: #FCC; 
     height: 30px; 
    } 
    #contentPanel { 
     float: left; 
    } 
    #rightPanel { 
     background: #EEE; 
     float: right; 
     width: 200px; 
     height: 150px; 
    } 
    #containerPanel { 
     width: 600px; 
    } 
</style> 

<div id="containerPanel"> 
    <div id="leftPanel"> 
    Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp; 
    </div> 
    <div id="headerPanel"> 
     header 
    </div> 
    <div id="contentPanel"> 
     Some content here... 
    </div> 
    <div id="rightPanel"> 
     Right 
    </div> 
</div>

來源

2013-02-05 12:08:51 Jonathan

我需要爲所有塊設置相同的高度。所以，在這種情況下我不能使用div。可能是如果使用JavaScript來計算和設置高度。但這是不好的解決方案。 – user2042869

使用html 5不再支持高度，並且在html中棄用4 由於您使用的是html5，我建議使用

style =「height：30px;」

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head> 
<body style="margin: 0px; padding: 0px;"> 
    <table style="width: 600px; height:500px"> 
     <tr> 
      <td rowspan="2" style="background: #FF0;">Left</td> 
      <td colspan="2" style="height:30px;background: #FCC;">header</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td style="background: #EEE;">Right</td> 
     </tr> 
    </table>   
</body> 
</html>

參考http://www.w3schools.com/tags/att_td_height.asp

來源

2013-02-05 12:09:07 Techmonk

TD和高度不能在IE

回答

相關問題