一、超链接访问后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; }