IE下行框高度的問(wèn)題

2024-07-11 08:46:03

字體：大中小

供稿：網(wǎng)友

下面是在IE6/7下面的結(jié)果:

這里是測(cè)試代碼:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title> new document </title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        *{padding:0;margin:0;}        html{}        body{line-height:1.5;text-align:center;font-size:14px;font-family:arial;}        .wrap{border:solid 1px blue;margin-bottom:10px;}        a{border:solid 1px red;text-decoration:none;color:#000;}        p{margin-bottom:20px;}        ul li{list-style:none;margin-right:20px;display:inline;}        .t1{font-family:宋體;}        .t2,.t4, .t6{font-family:verdana, 宋體;}        .t4 ul li a,.t5 ul li a{zoom:1;}        .t3,.t5{font-family:arial, 宋體;}        h3{font-size:14px;font-weight:normal;color:#333;}    </style></head><body><div style="width:960px;margin:0 auto;text-align:left;">  <h1 >IE中英混排時(shí)的行框高度問(wèn)題</h1>  <p >今天發(fā)現(xiàn)一個(gè)奇怪的問(wèn)題: 在IE下面, 中英混合與純中文的行框高度是不一樣的，這可是個(gè)比較郁悶的問(wèn)題;</p>    <h3 >使用font-family:宋體</h3>    <div class="t1 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用</a></li>         <li ><a href="">的文本</a></li>        </ul>    </div>    <h3 >使用font-family:verdana</h3>    <div class="t2 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用</a></li>         <li ><a href="">的文本</a></li>        </ul>    </div>    <h3 >使用font-family:arial</h3>    <div class="t3 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用</a></li>         <li ><a href="">的文本</a></li>        </ul>    </div>    <h3 >使用font-family:verdana, 同時(shí)使"a"標(biāo)簽 zoom:1</h3>    <div class="t4 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用</a></li>         <li ><a href="">的文本</a></li>        </ul>    </div>    <h3 >使用font-family:arial, 同時(shí)使"a"標(biāo)簽 zoom:1</h3>    <div class="t5 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用</a></li>         <li ><a href="">的文本</a></li>        </ul>    </div>    <h3 >使用font-family:verdana, 在不含英文的"a"標(biāo)簽中加入&-n-b-s-p-； 并且不使用zoom:1</h3>    <div class="t6 wrap">        <ul id="">         <li ><a href="">這里 Meta</a></li>         <li ><a href="">測(cè)試用&nbsp;</a></li>         <li ><a href="">的文本&nbsp;</a></li>        </ul>    </div>  </div></body></html>

提示：您可以先修改部分代碼再運(yùn)行

看來(lái)以后要慎重使用 Verdana的字體了，雖然很喜歡它。

上一篇：css 行級(jí)元素在多瀏覽器下的寬度問(wèn)題與解決方法

下一篇：CSS 實(shí)現(xiàn)的圖片寬高自適應(yīng)固定邊框