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 ...
随机推荐
- 快速学习hadoop只有这些基础可不行
“学习hadoop需要什么基础”这已经不是一个新鲜的话题了,随便上网搜索一下就能找出成百上千篇的文章在讲学习hadoop需要掌握的基础.再直接的一点的问题就是——学Hadoop难吗?用一句特别让人无语 ...
- 关于STM32 ADC自校准的个人理解
前几天发过一篇帖子,叫:关于STM32 ADC自校准的个人理解文章大体说的是自校准前要先将ADON位置1,之后再校准. 本以为彻底的了解了自校准的过程,但是昨天晚上无意间看到了一个函数说明,不禁愁云又 ...
- 网易云课堂Dubbo学习笔记
可以在这里下载dubbo的原码:https://github.com/alibaba/dubbo Dubbo架构原理:
- messageBox 的几种显示方式
1.最简单的,只显示提示信息 MessageBox.Show("Hello~~~~"); 2. 可以给消息框加上标题. MessageBox.Show("There ar ...
- 开始使用GoJS
GoJS是一个用于实现交互式图表的JavaScript库.本页将向您展示使用GoJS的必要条件. 由于GoJS是一个依赖于HTML5功能的JavaScript库,因此您需要确保您的页面声明它是一个HT ...
- pytest学习笔记
From: https://blog.csdn.net/gaowg11/article/details/54910974 由于对测试框架了解比较少,所以最近看了下pytest测试框架,对学习心得做个记 ...
- 【AMQ】之概述
消息中间件的主要作用: 基本功能,将信息以消息的形式在多个应用之间传递 特点: 消息异步接受,发送者不需要等待接收者的响应,减少系统之间的耦合性. 消息可靠性接收,确保消息在中间件可靠保存,只有接收方 ...
- gitlab ssh clone问题解决
公司搭建的gitlab,通过http协议可以clone: [sisi@pre-srv24 gitlab]$ git clone http://gitlab.test.mycompany.com/dev ...
- 高CPU排查方法分享
1 软件性能较差,占用CPU较多,往往是由于某段代码逻辑算法不佳导致,那如何在数以千计的函数中找到问题函数呢?2 在使用!runaway命令比较不同时间各线程占用CPU时间,找到CPU时间增涨较多的线 ...
- JS之滚动条效果
滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条 首先要实现的是上 ...