好程序員前端教程-關於瀏覽器的兼容問題
阿新 • • 發佈：2019-03-21
使用 pac -type 奇數 round 這就是 文字 無效 而且 好程序員前端教程-關於瀏覽器的兼容問題
常見瀏覽器兼容問題：
1.li在IE中底部3像素的BUG。解決方案：在< li>上加float:left；即可解決
常見瀏覽器兼容問題：
1.li在IE中底部3像素的BUG。解決方案：在< li>上加float:left；即可解決
- IE6中奇數寬高的BUG。解決方案：就是將外部相對定位的div寬度改成偶數。高度也是一樣的。
- IE6文字溢出BUG。引發這種BUG有以下幾個條件：
1）是註釋引起的,刪除所有註釋即可。
2）hidden的input直接放在form下。
3）display為none的div也有可能引發此bug。
4）可以通過外面再包一次DIV解決。
由註釋造成文字溢出，屬於IE6的BUG，溢出文字的字數=註釋的條數*2-1，這裏的字數在中文或英文數字時都成立。註釋坐在位置與溢出位置、區塊的浮動以及文字區塊的固定寬度有必然聯系。圖片描述解決辦法：
1)不放置註釋。最簡單、最快捷的解決方法；
2)註釋不要放置於2個浮動的區塊之間；
3)將文字區塊包含在新的< div>< /div>之間，如：<divstyle=”float:right;width:400px”>< div>↓這就是多出來的那只豬< /div>< /div>；
4)去除文字區塊的固定寬度，與3有相似之處；
5)在後面加一個< br/>或者空格；（不推薦）
6)使用IE註釋格式，如：<!–[if!IE]>Put your commentary in here…<![endif]–>。7)給盒子加position:relative;屬性 - 樣式中文註釋後引發失效。
滿足下面條件就會引起 註釋下面的樣式不起作用：
1）css有中文註釋。
2）css為ANSI編碼。
3） html為utf-8編碼。
解決方法：
1） 去掉中文註釋，用英文註釋。
2.）統一css 和 html 的編碼。
建議采用第二種解決方法：ps： css為uft-8，html為ANSI 不會出現失效的情況。 - li在IE中底部空行的BUG。
IE6中列表的常見問題出現在當某個 li 中的內容是一個 display: block 的錨點(anchor)時。在這種情況下，列表元素之間的空格將不會被忽略而且通常會顯示成額外的一行夾在每個 li 之間。一種避免這種豎直方向多余空白的解決方法是賦予這些錨點 layout。這樣還有一個好處就是可以讓整個錨點的矩形區域都可以響應鼠標點擊。解決方法：
1） 在li a 樣式中加入zoom:1；
2）在li 樣式中加入display:inline ；
3） 將< li>標簽寫成一行；
4）在li a 樣式中加入width:100%或者一個寬度值。
建議采用第4二種解決方法 - 父級使用padding後子元素絕對定位的BUG。
在父層使用position:relative;和padding（當然0值除外）後，ie6中層的定位起始坐標是從padding後的位置算起，而其他則從層的真實位置算起，而非被padding改變後的那個位置。這點造成使用position:absolute進行層定位時ie6與其他瀏覽器的表現不一樣。
解決方法：給外層加寬度或zoom:1。 - display:none引起的3像素的BUG
解決方案1：將最後一個div加一個margin-right:-3px。如：<divstyle=“display: none;”>< /div><divstyle=“background:green; width:10px;float:left; height:300px;margin-right:-3px”>< /div>
解決方案2：將display: none的div換一個形式隱藏。如：<divstyle="position:absolute;visibility: hidden ">< /div> - IE6的圖片3px問題
IE 6 中 ，DIV 使用背景圖片（或直接插入圖片在DIV中）的時候，在圖片的下端會出現一條空白間隔，經測量，剛好是 3px .
解決：IE6默認字號是12pt，默認行高是normal。 - 給DIV加上：font-size: 0px;
- 設置img為“display:block;”；
- 即設置圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以解決；
4.設置圖片的浮動屬性，“#sub img {float:left;}”；
5.取消圖片標簽和其父對象的最後一個結束標簽之間的空格，這種方法適用範圍比較窄，只限於父對象中只包含一個圖片對象，而且和父對象的結束標簽之間不能有任何空隙。 - IE6雙倍浮動BUG
解決：解決辦法是加上display:inline。
11 .IE6的著名3px BUG（斷頭臺bug）
兩個層，一個浮動，一個不浮動，把浮動的一個放在不浮動層中，你會發現兩個之間有點間隙，寬度為3px。這個問題是最讓人頭疼的問題了。
解決方法：
1）所有的層都浮動 把右邊那個層也設置成浮動層就可以消除這可惡的3px間隔。
2）給左邊的層，應用margin-right:-3px;，同樣可解決IE 3px bug。 - Ie6圖片導致行距無效
解決方法：對和文字相連接的img、input、textarea、select、object等元素加以屬性 margin: (所屬line-height-自身高度)/2px 0）。 - IE6使用濾鏡使PNG圖片透明後，容器內鏈接失效的問題。
解決方法是為鏈接定義一個相對定位屬性。position:relative。
存在兼容性問題的css屬性設置
1）body,div,…{margin:0;padding:0;}；
2）ul，ol，li{list-style-type:none;}；
3）clear{clear:both;height:0;overflow:hidden;}；
4）filter:alpha(opacity = 50)；濾鏡設置透明度；
5）a{text-decoration:none;border:none;} ；
6）有float，有橫向margin時，ie雙倍間距，設置display:inline。
好程序員前端教程-關於瀏覽器的兼容問題