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 ...
随机推荐
- kibana 启动 关闭 和进程查找
启动kibana : nohup ./kibana & 查看启动日志 : tail -f nohup kibana 使用 ps -ef|grep kibana 是查不到进程的,主要原因大概 ...
- Laravel $request添加数据或数据修改
laravel开发项目的时候,很多时候我们从$request里获取请求参数,今天在做项目的时候,遇到这样一个需求,就是请求参数到后台,后台需要根据判断重新给$request赋值,那如何去处理的 使用 ...
- JVisualVM监控本地Java进程
一.基于JVisualVM的可视化监控 1.打开C:\Program Files\Java\jdk1.8.0_131\bin下的jvisualvm.exe 2.打开后,会列出本机所有的Java进程 3 ...
- Vivado HLS初识---阅读《vivado design suite tutorial-high-level synthesis》（2）
Vivado HLS初识---阅读<vivado design suite tutorial-high-level synthesis>(2) 1.实验目的 2.启动命令行 将命令行切换 ...
- padding margin
padding:内边距 margin:外边距 内外边距是针对本标签相对于它相邻的标签而言. margin: 10px;是本标签与它周围上下左右有10像素的空白. padding: 10px;本标签其实 ...
- linux 修改mac地址,干坏事必备
首先关闭无线 wlan0 ifconfig wlan0 down 修改mac地址 macchanger -m [MAC] [INTERFACE] 例如:macchanger -m ::::: wlan ...
- 黄聪：超实用的PHPExcel[导入][导出]实现方法总结
首先需要去官网https://github.com/PHPOffice/PHPExcel/下载PHPExcel,下载后只需要Classes目录下的文件即可. 1.PHPExcel导出方法实现过程 /* ...
- eval方法将字符串转换成json对象
方法一: 使用Eval将json字符串转为json对象 var str = "name:'Jon',sex:'男'"; 将字符串进行处理: str = "{"+ ...
- 阿里云服务器 ECS Linux SWAP 配置概要说明
SWAP 简介 Linux 中的 SWAP(交换分区),类似于 Windows 的虚拟内存.系统会把一部分硬盘空间虚拟成内存使用,将系统内非活动内存换页到 SWAP,以提高系统可用内存. 注:参阅 E ...
- 峰Redis学习（8）Redis 持久化AOF方式
第三节:Redis 的持久化之AOF 方式 AOF方式:将以日志,记录每一个操作 优势:安全性相对RDB方式高很多: 劣势:效率相对RDB方式低很多: 1)AOF方式需要配置: # Please ...