多浏览器CSS样式解决方法

一、CSS HACK

1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

#box {
     color:red !important;
     color:blue;
 }

(注意这里IE6是无法识别 !important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)

2、为特定浏览器设置特定的样式

height:20px; /*For all 包括火狐 */
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
*+height:20px /* IE7 */
#someNode
{
    position: fixed;    /*给Firefox以及其他浏览器看 */
   #position: fixed;    /*给IE7看 */
   _position: fixed;    /*第三排给IE6以及更老的版本看*/
}

*+html 与 *html 是IE特有的标签, firefox 暂不支持。

*+html 对IE7的HACK 必须保证HTML顶部有如下声明:

XML/HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

二、float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]

将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可。

/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
    visibility:hidden;
}
.clearfix { display:inline-block;   }
/* Hide from IE Mac /*/
.clearfix { display:block; }
/* End hide from IE Mac */
/* end of clearfix */

待补充......

时间: 2024-08-09 19:50:44

多浏览器CSS样式解决方法的相关文章

CSS浏览器兼容性与解决方法

一.什么是浏览器兼容性问题? 所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况:而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的.认识浏览器内核   浏览器类型            内核                        JS引擎   IE                      Trident                     JScript   Firefox                 Gecko       

IE6浏览器下3px解决方法

IE6浏览器下3px解决方法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.IE6下的3px问题的产生主要应该归咎于书写不规范造成的,比如我们要写一个左右两列的结构,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法

昨晚配置完成office web apps 2013的外部网络访问之后,今天发现了一个很奇怪的问题,就是IE 11不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到<head>标签,里面有一句代码: <meta http-equiv="X-UA-Compatible" content="IE=99" /> 我把他改成了 <meta http-equiv="X-UA-Compatible&quo

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !important;       background:blue; 区别IE7与FF:       background:orange;        *background:green;       方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

HTML文档中应用css样式的方法总结

在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的link标记语句: <link rel="stylesheet" type="text/css" href="main.css" media="all" /> link标记必须放在head元素中,且不能放在其他元素(如t

非内联css样式获取方法

css样式分为内联样式.内部样式和外部样式,然而object.style.xxx只能够获取内联样式的属性值,内部样式和外部样式的css样式获取不到 js获取方法使用document.defaultView.getComputedStyle().currentStyle() 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 &

用JS读写CSS样式的方法总结

为了日后方便查询,本人翻阅了一些资料总结了以下方法,如有不对的地方欢迎指出! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如

用原生JS读写CSS样式的方法总结

一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如:elm.setAttribute('style','color:red;li

JS中获取CSS样式的方法

1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div> <script> var dv = document.getElementB