一、超链接访问后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. Quest for sane signals in Qt - step 1 (hand coding a Q_OBJECT)

    探索qt的信号ref: http://crazyeddiecpp.blogspot.hk/2011/01/quest-for-sane-signals-in-qt-step-1.html If it ...

  2. taro 事件处理

    https://nervjs.github.io/taro/docs/event.html Taro 元素的事件处理和 DOM 元素的很相似.但是有一点语法上的不同: Taro 事件绑定属性的命名采用 ...

  3. C/C++中带可变参数的函数

    1.带可变参数的函数由来 当函数中的参数个数不确定时,这时候就需要带可变参数的函数! 如我们经常使用的C库函数printf()实际就是一个可变参数的函数, 其原型为: int printf( cons ...

  4. windows系统如何设置域名解析

      C:\Windows\System32\drivers\etc        

  5. [转]【NLP】干货!Python NLTK结合stanford NLP工具包进行文本处理 阅读目录

    [NLP]干货!Python NLTK结合stanford NLP工具包进行文本处理  原贴:   https://www.cnblogs.com/baiboy/p/nltk1.html 阅读目录 目 ...

  6. Web API 令牌(秘钥是双方约定的,并不在网络连接上传输)

    http://blog.csdn.net/qq289523052/article/details/47750021 秘钥是双方约定的,并不在网络连接上传输 Web API数据传输加密 2015-08- ...

  7. oracle rename数据文件的两种方法

    oracle rename数据文件的两种方法 2012-12-11 20:44 10925人阅读 评论(0) 收藏 举报  分类: oracle(98)  版权声明:本文为博主原创文章,未经博主允许不 ...

  8. Android adb 模拟滑动 按键 点击事件

    模拟事件全部是通过input命令来实现的,首先看一下input命令的使用: usage: input ... input text <string>       input keyeven ...

  9. ubuntu 16.04 安装VS CODE时 此软件来自第三方且可能包含非自由组件

    先安装gdebi: sudo apt-get install gdebi 然后执行: sudo apt install ./vscode.deb

  10. maven使用配置

    一.maven常用的命令 maven通过命令对工程进行编译.测试.打包.发布.运行(基本的顺序) mvn compile:编译 mvn clean:清理,将target下的class文件清理 mvn ...