一、超链接访问后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浏览器兼容性与解决
原文地址：https://www.cnblogs.com/minozMin/p/8178872.html