當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

浏览器常见bug及解决办法

發布時間：2024/4/17 HTML 45 豆豆

生活随笔收集整理的這篇文章主要介紹了浏览器常见bug及解决办法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

常見的bug列表：

IE6下，當塊級元素 ??margin與float同方向時，margin會加倍 ?例如 .box{float:left;margin-left:10px;}在IE6下表現的margin-left是20px,這時的解決辦法設置display:inline; ?要深入理解margin雙邊距bug產生的條件。

img在所有瀏覽器下邊有空白通用解決辦法 ?img{vertical-align:top;},當然也有其他解決辦法參照筆記??img標簽下邊空白解決方案

img元素在ie瀏覽器下有默認邊框 ?通用解決辦法 img{border:0 none;} ? 綜合2，3解決這兩個bug可以在公用樣式中這樣定義 img{bordr:0 none;vertical-align:top;?}

多個行內元素都設置成display:inline-block;時元素之間有空格解決辦法設置父元素的font-size:0;再重新聲明父元素的子元素的字體大小

塊級元素設置display:inline-block;在IE6/7下不能正確顯示 ??*display: inline;*zoom: 1; ?

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>inline-block</title><link rel="stylesheet" type="text/css" href="../css/css.css"/><style type="text/css">.span1,.span2,.div1,.div2{display: inline-block; width: 100px; height: 100px;}.span1,.div2{ background: blue; }.span2,.div1{background: red;}.div1,.div2{*display: inline;*zoom: 1;}/**display: inline;*zoom: 1;*/</style></head><body><div class="box"><span class="span1">span1</span><span class="span2">span2</span><div class="div1">div1</div><div class="div2">div2</div></div><div>塊級元素的display:inline-block IE6/7 不支持，解決辦法 *display:inline;*zoom:1;</div></body> </html>

IE6不識別min-height(max-height)屬性，解決辦法 .box{min-height:100px;_height:100px;}, 此時一定不能再設置overflow的值為hidden，否則模擬min-height效果將失效

IE6下，當浮動元素與非浮動元素相鄰時，這個3像素的Bug就會出現我還沒搞清楚==

ul li a 列表時，設置a的display:block讓a充滿li的區域增大點擊區域 IE6下li之間會有間距，解決辦法為a設置height或者設置zoom:1;觸發IE下的hasLayout

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0; padding: 0;}ul,ol{list-style: none;}li a{background: blue; display: block;height: 30px; }</style></head><ul><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li><li><a href="#">99</a></li></ul><body></body> </html>

游標手指cursor??cursor: pointer 可以同時在 IE FF 中顯示游標手指狀，cursor:hand; 僅 IE中有效,所以用css設置鼠標手形時都統一用cursor:pointer;

在制作一個表格時一般將table放入一個div中，這時table寬度不能充滿父div,這時要設置table{width:100%;}

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表格</title><link rel="stylesheet" type="text/css" href="../css/css.css"/><style type="text/css">.tab_cont table{width: 100%;}.tab_cont th,.tab_cont td{border: 1px solid #ccc;padding: 5px 0;}.tab_cont tr{ text-align: center;}h1,p{text-align: center; font-weight: bold;color: red;}tr:hover{background: #666; color: #fff;}.gray{background: #F8F8F8;}thead tr{background: #999; color: #fff;}</style></head><body><h1>表格的制作方法</h1><div class="layout tab_cont"><table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></table></div><div><p>一定要設置table的width:100%讓table充滿父div,不設置不能充滿</p><p>單元格只對padding有效，對margin無效</p></div></body> </html>

萬能的zoom:1;當在IE6下遇到奇葩的問題不能解決時，試試zoom:1 它可以觸發ie6的hasLayout而不影響其他瀏覽器的正常表現

? CSS屬性Hack寫法 1、IE6瀏覽器 .demo {_color: red;} 2、IE6-7瀏覽器識別 .demo {*color: red;} 3、所有瀏覽器除IE6瀏覽外 .demo {color/**/:red;} 4、IE6-9瀏覽器 .demo {color: red9;} 5、IE7-8瀏覽器 .demo {color/***/:red9;}

轉載于:https://www.cnblogs.com/asunzhang/p/5981387.html

總結

以上是生活随笔為你收集整理的浏览器常见bug及解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。