在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF:
background:orange;
*background:blue;
区别IE6与IE7:
background:green !important;
background:blue;
区别IE7与FF:
background:orange;
*background:green;
方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:
padding: 20px !important; /*For Firefox*/
padding: 10px; /*For IE*/
(注意这里IE6是无法识别 !important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)
这个方法适用于修改少量代码。
例一:
CSS
#box {
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>
这个例子在IE6环境下,这行字是蓝色,在IE7及firefox下,为红色。
这是因为IE6不认important(即不认 !importmant 但是还是认!important前面的color:red),并且color:blue放
在color:red的后面(后面的css定义覆盖了前面的color:red),所以在IE6下字为蓝色;而在IE7及firefox下
important级别优先,所以color:red !important;和color:blue;的前后顺序没有关系,在IE7及firefox下red跟
blue谁先谁后都没有关系。
方法二:条件注释 (只对IE浏览器有效)先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
<!–[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]–>
另外:IE还支持一个非标准的标签:comment
<p>This is <comment>not</comment> Internet Explorer.</p>
This is Internet Explorer.
IE会自动把此标签中的内容当作注释处理掉。
方法三:javascript. 判断不同的浏览器类型以调用不用的css
//后面为注释
<SCRIPT. LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
...{
//如果浏览器为IE
setActiveStyleSheet("ie.css");
}else...{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
...{
//如果浏览器为Firefox
setActiveStyleSheet("ff.css");
}else...{
//如果浏览器为其他
setActiveStyleSheet("an.css");
}
}
function setActiveStyleSheet(title)...{
document.getElementsByTagName("link")[0].href="/blog/css/"+title;
}
//-->
</SCRIPT>
javascrip判断的第二种方法
<script. language=javascript>
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
{
document.write('<link rel=stylesheet type="text/css" href="ie.css">')
}
else {document.write('<link rel=stylesheet type="text/css" href="ns.css">')}
//-->
</script>
方法四:在css里为特定浏览器设置
height:20px; /*For all 包括火狐 */
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
*+height:20px /* IE7 */
在css里面就是那么几句会让不同的浏览器显示的不一样.我们只要把不兼容的那句设定给特定的浏览器,也可以实现完美兼容了
"/9" 例:"margin:0px auto/9;".这里的"/9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
*+ 针对IE7
在不同的浏览器使用不同的css样式,解决浏览器兼容问题的更多相关文章
- 如何让不同浏览器调用不同的CSS样式
如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
- 如何根据不同的浏览器写不同的css样式达到兼容
做前端静态页面的时候总是发现,ie的兼容性很差,总会出点问题.然后就去改代码 ,改完以后 又发现 火狐 谷歌又挂了,这可咋整. 后来发现做个判断吧 哪里有问题哪里就做个判断呗 ,咋判断呢,这么 ...
- 怎样使一个宽为200px和高为200px的层垂直居中于浏览器中?写出CSS样式代码。
div{ height:100px; width:100px; position:absolute; top:50%; width:50%; margin-letf:-100px; margin-to ...
- js的append拼接html丢失css样式解决
htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='left ...
- CSS样式总结
CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标 ...
- 前端之css样式(选择器)。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 初始化 CSS 样式
为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异. 当然,初始化样式会对 SEO 有一定的影响,但鱼 ...
随机推荐
- java 获取当前进程id 线程id
java 获取当前进程id 线程id RuntimeMXBean (Java Platform SE 8 ) https://docs.oracle.com/javase/8/docs/api/j ...
- curl命令踩的坑
使用curl命令执行get请求,带多个参数: curl localhost:/user/binding/query?userId=&wrapperId=&from=test [] [] ...
- python调用C++之pybind11入门(相互调用)
python调用C/C++有不少的方法,如boost.python, swig, ctypes, pybind11等,这些方法有繁有简,而pybind11的优点是对C++ 11支持很好,API比较简单 ...
- Python将科学计数法数值转换为指定精度浮点数
Python将科学计数法数值转换为指定精度浮点数 In [20]:money = 1190000.0 In [21]: traded_maket_value = 13824000000 In [22] ...
- matplotlib-曲线和折线案例
matplotlib-曲线和折线案例 import matplotlib.pyplot as plt import numpy as np x = np.linspace(-5, 5, 100) pr ...
- android GridView的setOnItemClickListener事件不执行
问题可能1: item设置的可能是button,或者可以click点击事件控件,导致控件执行而item按钮不执行 解决方法:设置控件 的 android:clickable="false& ...
- js-template-art【四】通过helper方法注册,调用外部方法
一.语法 模板代码中调用外部函数,需要通过helper方法注册 template.helper(name, callback) 二.使用[实例] 原文:http://blog.csdn.net/u01 ...
- EasyUI Easyloader 加载器
用法 加载 EasyUI 模块 easyloader.base = '../'; // 设置 easyui 的基本目录 easyloader.load('messager', function(){ ...
- L1正则与L2正则
L1正则是权值的绝对值之和,重点在于可以稀疏化,使得部分权值等于零. L1正则的含义是 ∥w∥≤c,如下图就可以解释为什么会出现权值为零的情况. L1正则在梯度下降的时候不可以直接求导,可以有以下几种 ...
- python学习之路-day10
一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程. 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程. 车间负责把资源 ...