CSS瀏覽器兼容性與解決
阿新 • • 發佈：2018-01-02
add 解決方法 blog 瀏覽器兼容性 navigator ont xpl lin ddd
一、超鏈接訪問後hover樣式不出現
1、現象描述：
同時設置了a:visited和a:hover樣式，但一旦超鏈接點擊過後，hover的樣式就不再出現了。
2、解決方法：
調整樣式順序為先a:visited再a:hover即可。
a標簽四種狀態的排序：l(link)ov(visiter)e h(hover)a(active)te
二、行內元素上下margin和padding不拉開元素間距
1、現象描述：
行內元素的margin和padding在水平方向的都產生邊距效果，但豎直方向的都沒有效果。
（1）HTML代碼：
<div>塊級元素</div> <span>行內元素</span>
（2）CSS代碼：
div { background: gray; padding: 20px; } span { background: green; padding: 20px; margin: 20px; }
2、解決方法：
將行內元素display設置為block或inline-block即可。
（1）CSS代碼：
span { background: green; padding: 20px; margin: 20px; display: block/inline-block; }
三、浮動背景：
解決浮動背景，可在<head></head>之間相應的位置輸入以下代碼：
<style type=‘text/css‘> <!-- body { background-image: url(image/bg.gif); background-attachment: fixed; } --> </style>
四、list-style-image無法準確定位的問題：
解決list-style-image無法準確定位的問題，可在<head></head>之間相應的位置輸入以下代碼：
<style type=‘text/css‘> <!-- li { list-style: url(‘http://gluu5.163.com//E/11/6.gif‘); } li a { position: relative; top: -5px; font: 12px/25px 宋體; } --> </style>
五、設置滾動條的顏色：
設置滾動條的顏色，可在<head></head>之間相應的位置輸入以下代碼：
<style type=‘text/css‘> <!-- html { scrollbar-face-color: #F6F6F6; scrollbar-highlight-color: #FFF000; scrollbar-shadow-color: #EE00EE; scrollbar-face-color: #F6F6F6; scrollbar-3dlight-color: #EE222E; scrollbar-arrow-color: #CCC000; scrollbar-track-color: #DDEECC scrollbar-darkshadow-color: #FFFDDD; } --> </style>
六、innerText在IE下正常，但在FireFox下卻不行：
解決此問題需要textContent：
（1）JQuery代碼：
if(navigator.appName.indexOf(‘Explorer‘) > -1) { document.getElementById(‘element‘).innerText = ‘My text‘; } else { document.getElementById(‘element‘).textContent = ‘My text‘; }
七、ul和ol的列表縮進問題：
消除ul和ol的列表縮進問題，應寫成如下樣式：
ul { padding: 0; margin: 0; list-style: none; } ol { padding: 0; margin: 0; list-style: none; }
CSS瀏覽器兼容性與解決