CSS浏览器兼容性与解决
一、超链接访问后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浏览器兼容性与解决的更多相关文章
- 【转】CSS浏览器兼容性与解析问题终极归纳
1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...
- HTML+CSS浏览器兼容性问题
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 ...
- 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- CSS浏览器兼容性问题解决方法总结
CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...
- 浏览器的兼容性（CSS浏览器兼容性、CSS hack）
一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...
- javascript和css浏览器兼容性总结
一些浏览器的兼容性做一个总结的问题以下: 为什么会出现这样的现象是?主要表现为Firefox这样的良好支持的浏览器W3C标准,这是现在CSS支持最好的浏览器,和ie它比较早出现,在w3c支持一直没有做 ...
- CSS浏览器兼容性与解析问题终极归纳
1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...
- CSS浏览器兼容性问题集（）两
11.非常适合 高度适合于被改变时所述内目标高度的外层的高度不能自己主动调节,尤其是排队对象时margin 要么paddign 时. 例: #box {background-color:#e ...
- css 浏览器兼容性问题解决
一个.!important (功能有限) 随着IE7正确!important支持, !important 方法现在只IE6兼容.(注意措辞.我记得这句话需要推进的位置.) : #example ...
随机推荐
- docker 的前台模式和后台模式
Detached(后台模式) vs foreground(前台模式) 当我们启动一个容器时,首先需要确定这个容器是运行在前台还是运行在后台. -d, --detach Run container in ...
- Tomcat设置UTF-8字符
进入tomat路径 vim conf/server.xml
- java程序控制
一.软件生命周期 什么是软件: 软件是程序员根据需求用计算机的语言去编写一系列的指令的集合,能让计算机快速去自动执行.1.1做市场调研----->调研报告书 ======项目经理 1.2可行性分 ...
- DeviceIoControl 驱动交互
驱动程序通信的函数,除了ReadFile和WriteFile函数还有DeviceIoControl函数,而且DeviceIoControl函数那是相当的彪悍.因为它可以自定义控制码,你只要在IRP_M ...
- msp430学习笔记-USART
本文引用:http://bbs.ednchina.com/BLOG_ARTICLE_3013784.HTM MSP430F149有两个USART通讯端口,其性能完全一样,每个通讯口可通过RS232和R ...
- Web API 令牌(秘钥是双方约定的，并不在网络连接上传输)
http://blog.csdn.net/qq289523052/article/details/47750021 秘钥是双方约定的,并不在网络连接上传输 Web API数据传输加密 2015-08- ...
- Java Base64编码
使用commons-codec, 下载地址 http://commons.apache.org/proper/commons-codec/ 下载commons-codec-1.12-bin.zip,解 ...
- InfluxDB学习之InfluxDB的基本操作| Linux大学
来源地址:https://www.linuxdaxue.com/influxdb-study-series-manual.html 本文属于<InfluxDB系列教程>文章系列,该系列共包 ...
- Scrapy环境安装
开始安装前,建议安装Visual C++ 2015 Build Tools,否则会一直出现如下提示: 下载地址:http://landinghub.visualstudio.com/visual-cp ...
- PHP_EOL DIRECTORY_SEPARATOR
换行符 PHP_EOL unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 路径上的斜杠 DIRECTORY_ ...