瀏覽器相容問題專案總結(五)table中td和li高度問題
阿新 • • 發佈:2019-02-15
1、td高度
問題:
在IE9、IE10、FF、chrome中table中td的高度不包含border的寬度,但是IE7和IE8中td的高度包含了border的高度,設定line-height和height一樣。
解決:
暫無解決辦法,只能通過判斷瀏覽器解決。
其問題示例如下:
<spanstyle="font-size:18px;"><body > <table> <tr> <td style="line-height:20px;border:5px solid red;">設定line-height:20px</td> </tr> </table> <table> <tr> <td style="height:20px; border:5pxsolid red;">設定height:20px</td> </tr> </table> </body></span>
2、li高度
問題:
在IE7下如果為li指定高度可能會出現排版錯位,其他瀏覽器無此現象
解決:
設定line-height
例項:
<spanstyle="font-size:18px;"><style type="text/css">
li{
list-style-position:inside;
}
</style>
</head><body >
解決前:
<listyle="height:40px;">hello</li> <listyle="height:40px;">hello</li> <listyle="height:40px;">hello</li> <listyle="height:40px;">hello</li>
解決後:
<listyle="line-height:40px;">hello</li>
<listyle="line-height:40px;">hello</li>
<listyle="line-height:40px;">hello</li>
<listyle="line-height:40px;">hello</li>
</body></span>