css ie6 ie7 firefox兼容写法

    比如这个条件:
    margin:3px 3px 0px 3px;
    display:block;

    想必大家一看就知道是什么意思了,但通过测试,IE6和IE7浏览器,表现得就有区别。IE6表现得就很松散,似乎不止3px的左右距离而变成了双倍距离,即6px;而IE7下,基本正常。

    后来在网上学习了一下,将display:block;这个条件变成了display:inline;后,IE6正常了,不再出现那么大的距离,而且比较准确;但IE7又不正常了,似乎右边的距离变小(几乎没有),左边的距离正常。

    继续在网上学习,之后加进了一些条件,将css里的条件改成这样:
    *margin:3px 8px 0px 3px !important;  /***适合IE7.0***/
    *margin:3px 3px 0px 3px;                /****适合IE6.0***/
      margin:3px 8px 0px 3px;                  /*****适合FF*****/
    *display:block !important;
    *display:inline;
      display:block; 

    为什么这样做呢?原因如下:
    IE7.0 兼容任何条件,既能识别*号,也能识别 !important ;
    IE6.0 能识别*号,但不能识别 !important ;
    FF(火狐)能识别 !important ,但不能识别*号。

    那这样一来,如果对方用的FF,那就只能识别margin:3px 8px 0px 3px;  而不能识别上面的两个条件了。

    如果对方用的IE6.0  ,那第一个条件不能满足,只能优先识别第二个条件:*margin:3px 3px 0px 3px; 

    如果对方用的IE7.0,那首先第一个条件就满足了,优先考虑:  *margin:3px 8px 0px 3px !important; 

时间: 2024-12-11 10:07:37

css ie6 ie7 firefox兼容写法的相关文章

针对IE6,IE7,Firefox的CSS

css 我们在用CSS进行构建网页的时候,IE6跟Firefox之间的差异问题可以用 !important 来解决(这种方法尽量少用),但是IE7似乎还是不认识 !important ,而且它跟IE6之间也存在一些差异.浏览器的不一致性总是让人很头疼! 下面分别给出IE6\IE7\Firefox的hack代码: #example { color: #333; }     /* Firefox */* html #example { color: #666; }     /* IE6 */*+ht

CSS hack写法区分不同浏览器IE6 IE7 firefox:

区别IE6与FF:        background:orange;*background:blue; 区别IE6与IE7:        background:green !important;background:blue; 区别IE7与FF:        background:orange; *background:green; 区别FF,IE7,IE6:        background:orange;*background:green !important;*background

css中常用的ff,ie6,ie7样式兼容问题收集

现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致 页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样:  代码如下 复制代码 #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #99

css在ie6 ie7和火狐写法区别

("√"代表可识别优先,"x"代表不可识别) 示例:(FF:white;IE7:greenIE6:orange) 只针对FF与IE6(IE7): background:white; *background:orange; 只针对IE7与IE6: background:green; _background:orange; or- background:green !important background:orange; 只针对FF.IE7与IE6: backgrou

支持IE6 IE7 Firefox 的纯CSS的下拉菜单_经验交流

XHTML/CSS 标准 教程 技术文章 常见问题 布局教程专题 CSS菜单 浏览器兼容 滚动条相关 圆角矩形专题 CSS特效欣赏专题 AJAXAJAX教程 AJAX技术 JavascriptJSON 技术文章 DOM XML 正则表达式正则表达式简介 正则表达式之道 网站优化 电脑网络 建站技术PHP ASP ASP.NET JSP SQL Flash Dreamweaver 2007-4-16 css drop down menu

纯CSS的下拉菜单 支持IE6 IE7 Firefox

XHTML/CSS 标准 教程 技术文章 常见问题 布局教程专题 CSS菜单 浏览器兼容 滚动条相关 圆角矩形专题 CSS特效欣赏专题 AjaxAJAX教程 AJAX技术 javascriptJSON 技术文章 正则表达式正则表达式简介 正则表达式之道 建站技术PHP ASP ASP.NET JSP SQL Flash Dreamweaver

css ie6 ie7 ff的CSS hack使用技巧_经验交流

FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很

有关网站开发(支持IE6,IE7,firefox)

问题描述 现在的的网站开发,一般浏览器需要考虑各种版本,比如IE的各种版本,还是就是ff了,想问一下在使用javascript的时候,或者css的时候,要怎么考虑不同浏览器的开发谢谢 解决方案 解决方案二:javascript在IE6和IE7有点区别.解决方案三:没有必要太在乎浏览器的.解决方案四:尽量使用w3c推荐的标准用法,不要使用ms自己的扩展.

多浏览器下IE6 IE7 firefox li 间距问题第1/2页_经验交流

今天小雷提到一个ie5下li产生空白行距的问题,下面来测试一下.  新建一个简单的HTML测试文件,下面来测试ul li标签. 复制代码 代码如下: <ul>   <li><a href="#">菜单一</a></li>   <li><a href="#">菜单一</a></li>   <li><a href="#">