ie7的css兼容性写法,CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

news/2024/12/21 21:44:10/

css ie6,ie7,ie8 兼容性写法,CSS hack写法

margin-bottom:40px;       /*ff的属性*/

margin-bottom:140px\9;    /* IE6/7/8的属性 */

color:red\0;              /* IE8支持 */

*margin-bottom:450px;     /*IE6/7的属性*/  +margin-bottom:450px;

_color:#ff0000;         /* 只ie6支持 */

#1 { color: #333; } /* FF环境 */

* html #1 { color: #666; } /* IE6环境 */

*+html #1 { color: #999; } /* IE7环境 */

================================================================================

三、CSS hack写法

书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。

color:red;//所有浏览器

color:blue\9;//所有IE

+color:orange;//IE7

_color:green;//IE6

若浏览器为FireFox,那么color:red;若浏览器为IE8,根据CSS优先性原则,color:blue;若为IE7,color:orange;若为IE6,则color:green。

IE6识别 * 、_

IE7识别 * 、+

IE8识别 * 、\9,\0

只有IE8识别  \0/

ie9只识别:\9

FF什么都不识别

.test{

color:#09F\0; /* IE8/9 */

color:#09F\0/; /* IE8 only */

}

:root .test { color:#963\9; } /* IE9 only */

/*或者下面的,但是下面的优先级小于上面的。Ps:老外的方法都是\0,根本没考虑Opera*/

@media all and (min-width:0){

.test{color:red\9; }/* IE9 only */

}

在Firefox中,div的完整宽度是padding+width,因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中,div的完整宽度是width,所以

这个div和下面的div宽度一致。

宽度为300px的div

通过借助!important标记,可以设置Firefox中的width值为IE6中的width值减去padding值,这样就实现了Firefox与IE6的padding效果尺寸兼容。

==================================================================================

DOCTYPE标准firfox与ie6 padding的问题

首先我们说说firefox和IE对CSS的宽度显示有什么不同:

其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’

则是指整个容器的宽度,包括内容,padding ,border。

Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度

IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度

所以,如果IE中定义 width:120px;padding:5px 的话,所显示的宽度就是120px.

即padding:5px是在width里面。

而Firefox中,上面这个定义,显示宽度就是 125 px;

所以,我们就必须这样定义

width:115px !important;width:120px;padding:5px;

必须注意的是, !important; 一定要在前面。

除了在不同的浏览器上会有这个问题,还有可能是在编码时引用了/p>

这个头,他在ie浏览器下要支持w3标准,w3的padding和firfox标准相同,所以也会出现上面的情况

=====================================================================================

网站如何同时兼容IE6、IE7、IE8

第一招:给常用CSS规定属性值。

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}

img{border:0px;}

ul {margin:0px;padding:0px;}/

ul li {list-style:none;}

上面的建站常用代码就相是格式化CSS样式,让各浏览器按照我们设置的属性值渲染网页

第二招:IE和FF下对象居中问题

IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。

但是这样的方法在FF不行的。这里就需要给修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距离为0像素,左右为自动。所以FF就会居

中显示。

第三招:垂直居中(仅只用于一行)

比如说一个高30px的div,问题默认是会显示在左上角,如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px;

数值越大越局下,为了防止撑破层,还需要再给一个样式overflow:hidden;(超出的部分不显示)

第四招:给每一个块对象设置三个样式

width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。

第五招:针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到)

原来建设网站经常使用!important来设置优先权,但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法

#1 { color: #333; } /* FF环境 */

* html #1 { color: #666; } /* IE6环境 */

*+html #1 { color: #999; } /* IE7环境 */

上面的书写顺序一定不能去改变。

这样子网页在FF下显示#333,IE6下显示#666,IE7下显示#999;

兼容IE6/IE7/IE8/FireFox的css hack

兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了

随机推荐

JavaWeb_day07_JSP

本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day07 JSP 全称 :Java Server P ...

[Git] Ubuntu 升级 git 版本

$ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git

poj 1664

http://poj.org/problem?id=1664 题目是中文的,一个递归的题目 把每一次的苹果分为两类 Ⅰ:所以盘子都放一个,然后其他的在随便放: Ⅱ:有一个盘子没有放苹果: 这样下去的话 ...

Linux grep和find的区别

这是两个不同的命令,关于grep:Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressi ...

C#代码计时

using System.Diagnostics; Stopwatch sw = new Stopwatch(); sw.Start(); //todo code ....... sw.Stop(); ...

MySQL忘记了密码登录不进去,用命令符修改新的密码重新登录的方法

MySQL忘记了密码登录不进去,用命令符修改新的密码重新登录的方法: 1.备份my.ini 2.在my.ini字段里 [mysqld] #socket=mysql skip-grant-tables ...

python科学计算_numpy_函数库

1.常规函数与排序 常用统计函数: 求和:sum().均值:mean().标准差:std().方差:var().最小值:min().最大值:max().最大值与最小值之差:ptp().最大值的下标:a ...

Dynamics CRM2013 停用默认公共视图

CRM视图中一般只会有一个默认公共视图,如果你不想用已有的默认视图只需新建个视图再指定默认,然后将原有视图停用即可,但我碰到了个另类的问题,即在一个实体下同时存在两个默认视图而且无法停用. 如下图中的 ...

.NET开发工程师职业规划

本人结合自己的实际状况和未来的职业规划,所做学习计划如下: 初级开发工程师(1年) 熟悉C#语言:熟悉MVC原理:熟悉 SQL Server Oracle MySql其中一种数据库,能独立编写增.删. ...

Python基础之多态与多态性

切记:不要将多态与多态性这二者混为一谈,只要分开,就会很明朗了. 一.多态 多态指的是一类事物有多种形态,(一个抽象类有多个子类,因而多态的概念依赖于继承). 比如:动物分为人类.狗类.猪类(在定义角 ...


http://www.ppmy.cn/news/905443.html

相关文章

ie6~ie9 hack 写法

从后往前,依次是,firefox,ie9 ,ie8,ie7,ie6. (注意杠9杠0,不知道为什么显示不出来,因此用的全角的) selector{ background-color:#f00;/*all*/ background-color:#0ff\0;/* ie 8/9 */ background-color:#…

2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6 跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,…

IE6 即将成为历史 纠结的IE6

今天早上听到一个令我非常兴奋的消息,那就是IE6即将成为历史了,哈哈。 微软高管放言,宣称微软现在的目标之一就是将IE6在中国的市场份额降为零。还称IE6占中国浏览器市场份额的45%,成为中国网民使用最多的浏览器是因为大部分网民…

全面兼容ie6,ie7,ie8,ff的CSS HACK写法

全面兼容ie6,ie7,ie8,ff的CSS HACK写法 写页面设计的朋友们&#xff0c;经常为浏览器CSS的兼容性头痛不已&#xff0c;经过本人的仔细研究发现一种好的写法&#xff0c;现在与大家分享. CSS代码&#xff1a; <style type”text/css”> #body { border:2px solid #00f; …

IE5、IE6、IE7、IE8 的CSS HACK兼容

一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *html 与 *html 是IE特有的标签, firefox 暂不支持.而*html 又为 IE7特有标签. 注…

javascript 兼容 IE6、IE7、FF 的“加入收藏”

IE6、IE7 的“加入收藏”代码&#xff1a; window.external.addFavorite(sURL, sTitle); 说明&#xff1a; addFavorite 的第一个字母 a 不是大写&#xff01;纵然微软参考上是大写&#xff0c;但“事实胜于雄辩”。 Firefox 的“加入收藏”代码&#xff1a; 方法一、 <a…

转:IE6终极备忘:修复IE6下 25+ Bugs

IE6终极备忘&#xff1a;修复IE6下 25 Bugs [译]IE6终极备忘&#xff1a;修复IE6下 25 Bugs 2010年01月08日 | HTML/CSS, JavaScript 去年就想将IE的bug系统地整理下&#xff0c;但一直都忙于工作、学习没有完成&#xff0c;看到这篇E文后&#xff0c;我毫不犹豫的放下了手中…

解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法【记录下来,以后可以使用】

解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法 2010-08-11 15:28 每次调CSS最令人头痛的就是浏览器校正问题&#xff0c;因为每个浏览器对CSS的解释都不太一样&#xff0c;Firefox本身算是比较照规矩来&#xff0c;处理上比较简单&#xff0c;但是遇到微软的IE系列头就大…