一、超链接访问后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:;
margin:;
list-style: none;
} ol {
padding:;
margin:;
list-style: none;
}

CSS浏览器兼容性与解决的更多相关文章

  1. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  2. HTML+CSS浏览器兼容性问题

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    ...

  3. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  4. CSS浏览器兼容性问题解决方法总结

    CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...

  5. 浏览器的兼容性(CSS浏览器兼容性、CSS hack)

    一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...

  6. javascript和css浏览器兼容性总结

    一些浏览器的兼容性做一个总结的问题以下: 为什么会出现这样的现象是?主要表现为Firefox这样的良好支持的浏览器W3C标准,这是现在CSS支持最好的浏览器,和ie它比较早出现,在w3c支持一直没有做 ...

  7. CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  8. CSS浏览器兼容性问题集()两

    11.非常适合    高度适合于被改变时所述内目标高度的外层的高度不能自己主动调节,尤其是排队对象时margin 要么paddign 时. 例:   #box {background-color:#e ...

  9. css 浏览器兼容性问题解决

    一个.!important (功能有限)   随着IE7正确!important支持, !important 方法现在只IE6兼容.(注意措辞.我记得这句话需要推进的位置.)   : #example ...

随机推荐

  1. python2核心类库:urllib、urllib2的区别和使用

    urllib/urllib2都是接受URL请求的相关模块区别:1.urllib2可以接受一个Request类的实例来设置URL请求的headers,urllib仅可以接受URL.这意味着,你不可以伪装 ...

  2. Linux下处理文件中的^M

    由于之前爬某房地产网站的房价数据,开始没有定义好存储的位子,所以临时存储在了txt文件中.最近定义清楚数据需要存储在mongoDB中,所以我需要从原来数据中解析出来存储在mongoDB中,转存的时候在 ...

  3. java JVM JRE JDK三者之间的关系

    JDK在包含JRE之外,提供了开发Java应用的各种工具,比如编译器和调试器. JRE包括JVM和JAVA核心类库和支持文件,是Java的运行平台. JVM是JRE的一部分,Java虚拟机的主要工作是 ...

  4. java Collections.sort()

    sort()是Collections中的静态方法,用于对List容器中的元素排序. 如容器list中存储的是Integer对象 List<Integer> list =Arrays.asL ...

  5. jmeter-场景-上传文件-send-a-file

    jmeter --上传文件 jmeter-场景-上传文件-send-a-file 简要说就3点: POST请求 Request的参数都写在路径内,不写在表单里 上传的文件写在表单里 只要记住以上3点, ...

  6. const引用返回值

    一.引用 引用是别名 必须在定义引用时进行初始化.初始化是指明引用指向哪个对象的唯一方法. const 引用是指向 const 对象的引用: ; const int &refVal = iva ...

  7. subversion与TortoiseSVN的使用

    Subversion是一个自由开源的版本控制系统.在Subversion管理下,文件和目录可以超越时空.Subversion将文件存放在中心版本库里,这个版本库很像一个普通的文件服务器,不同的是,它可 ...

  8. elasticsearch 聚合函数 max double精度损失bug

    测试样例数据{ "size" : 0, "query" : { "bool" : { "must" : { " ...

  9. padding margin

    padding:内边距 margin:外边距 内外边距是针对本标签相对于它相邻的标签而言. margin: 10px;是本标签与它周围上下左右有10像素的空白. padding: 10px;本标签其实 ...

  10. 进程池pool

    如果有多个进程,同一时间只能有限个给cpu运行 from multiprocessing import Process,Pool import time,os def bar(arg): print( ...