合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

css处理浏览器兼容技巧总汇

日期:2013-12-16  来源:攀枝花惠康网络公司


图2

css里关于浏览器的兼容问题一向思疑着我们初级的css用户(高手可直接绕过),这里想按照我前?#38382;?#21051;拜读的李超的书籍《css网站结构实录》里学到的有关措置浏览器兼容的问题,按照我前?#38382;?#21051;在公司minisite项目里碰着的一些问题息争决体例分享给巨匠。浏览器兼容性的问题,我想一向是困绕我?#24039;?#35745;师的棘手问题,css的可贵就在这里。解决好这个问题,我想你的css水平必然会获得年夜步的晋升。

自年夜W3C尺度推出往后,此刻新的一些浏览器多多少少在使用这套web的新尺度,但在各自对新尺度的执行上并不统一,这就给我?#24039;?#35745;师带来?#32423;?#30340;问题。今朝世面上主流的浏览器仍是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面年夜部门人在用IE6和IE7两个版本的浏览器,而这两个版本对css的撑持有很是多的差异之处,这种差异是最需要我?#24039;?#35745;师注重的,因为它跟我们的日常设计互相关注。我在现实的建造过程傍边碰着的问题有绝年夜部?#25856;?#21576;此刻IE6和IE7的css兼容性问题上。IE6,IE7在加上firefox2.0,如不美观能把这三个浏览器?#20960;?#23450;了,也就根基上知足95%以上的用户了。不才面我列举了一些我在项目里碰着的现实的问题息争决的体例,其中有?#32423;?#26159;css高手GL的措置思绪息争决体例,很是值得吸收和借鉴,因为这为我们解决此后碰着近似的问题供给解决问题的思绪。建议?#20173;?#35835;《css网站结构实录》这本书,此刻出了新版本《css网站结构实录2》,要细心阅读哦,相信我,简直能让你收益非?#22330;?#19979;面列举一些事例,但愿能给巨匠供给一些借鉴:

A: IE6/IE7 div等块对象默认具有高度


图A


图C


如图,膳缦沔是IE6.0里的显示,下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽?#26085;?#22909;的情形下,在IE7和firefox下可以上去,而在IE6琅缦沔就被显示在了第二行。这就是IE6的闻名的3px现象,当一个对象设置为左悬浮,这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的体例是针对于IE6,在css里写一个css hack, 如在左边的div上加:margin-right:0px!important;margin-right:-3px;!important这个标识表记标帜IE7和firefox是撑持的,而我们伟年夜的IE6却置若罔闻,我们就可以按照这个特点,让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。


< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >


这是我在具体做项目时现实碰着的问题,解决这个问题的思绪和体例来自GL的撑持,我把它清算出来分享,但愿能给你有所辅佐。


图1

看下面图1,此刻一共有divA, divB, divC, divD, divE这么5个div, 方针是让divD和divE移上去,跟divA其行显示,达到图2的效不美观。我在那时实现的时辰,在divA,divB,divC里分袂加上style=”float:left;clear:both”,这样在IE6和IE7诚恳现了图2的效不美观,但在firefox里就呈现了图3的显示,我在那时试过?#32423;?#20307;例, 如在div4里写float:right;让div4?#34892;?#28014;,想让它上去,这样只能跟divC并列显示。对css感乐趣的人可以先自己试试,其实体例很是简单,给div4和div5分?#24039;?#32622;个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单,这里是供给一种解决css兼容问题上的一种思绪。

一些问题是浏览器自身的问题,碰着问题发生无法避免的情形下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:


图1


图2

D: 若何让图片在div里摆布居中,上下居中
如下图1, 我们要让图片在IE6,IE7和firefox下图片相对div摆布居中,上下居中来显示如图2,这是众多设计师可能都要面临要解决的问题,因为这种体例我们经常要用到。这里把解决的体例分享给巨匠,要想让图片摆?#32423;?#40784;,我们可以在div里写入”style:text-align:center;”,摆布居?#24418;?#39064;好解决,此刻看一下,IE6,IE7和firefox里,图片都已经?#21069;?#24067;居中了,手艺的可贵是若何让图片在三个浏览器垂直居中。年夜部门人可能会考虑使用vertical-align:middle来使图片居中,加上去看看没有呈现效不美观,这里我们针对图片设置如下代码:style=”_margin-top: expression(( 300 – this.height ) / 2);发此刻IE6下效不美观实现了,再看看IE7和firefox, 没有转变,这里我们针对IE7和firefox来设置,在div里写入line-height:300px;vertical-align:middle,发现IE7这时辰也有用不美观了,这里的line-height:300px;?#21069;?#29031;div的高度定的,如不美观div的高度为100px,则这里设置line-height:100px,这里我?#24039;?#32622;为300px。那么,这时辰IE解决了,看一下firefox图片还没垂直居中,再对div增添样式:display:table-cell,此刻再看看firefox也好了。

B: IE6下块对象默认的3PX现象


图2

参考代码:
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=http://www.css88.com/archives/”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />

有乐趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题,下面代码酬报增添了一些空格,请copy的时辰自行删去)
< /div >

E: IE捉迷藏现象
捉迷藏问题是IE很是典型的对css撑持上的bug, 问题首要呈此刻IE6浏览器。当div嵌套结构稍微复杂时,就会呈现捉迷藏情形。如下面例子:


图3

开初我们写上斗劲简单的结构代码,如下:


padding:5px;

膳缦沔代码很是简单,此刻我们在琅缦沔考试考试增添一些内容:


图B

为了让bug显示,我们给膳缦沔的xhtml写上css样式,如下:

然后我们到IE7.0 firefox里先后去预览一下,显示一切正常,如下图1。

图1

我们再到IE6去打开它,发此刻刚刚打开的时辰,看到如下图2的情形,?#20063;?#30340;内容奇异的消逝踪了。全选页面内容,发现?#20063;?#20869;容是存在的,如不美观用鼠标移到链接膳缦沔,?#20063;?#30340;内容又跑了出来,这就是IE6闻名的捉迷藏现象。不仅在今朝事例中,在其他情形下也可能呈现。造成这种现象的具体触发机?#24179;?#26397;还不能合理的归类,至今为止,这种情形只在IE6下呈现。

解决这个问题的体例,可以参考positioniseverything.net的网站专家给出的一些建议:
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来断根悬浮
b: 如不美观有可能,给layout对象设定width和height
c: 可以考试考试给layout和left对象使用position:relative
d: 对layout使用line-height属性,强制浏览器对内容文字进行行距调整。

以上是供给解决浏览器问题的一些技巧,positioniseverything.net网站专家的建议,更主要的是要养?#21024;?#37319;的编码习惯来预防捉迷藏情形的发生。


a: 针对区别IE6 和IE7/firefox, 可以在要区此外代码后面跟上!important
[xmlns] #left {
float:left;
border:4px solid #999;
width:200px;
height:200px;


}
c: 只针对IE6起浸染,可以在css前面加* html,如:
* html #left {
clear:both;
}


b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性,如不美观我想要只针对IE7/firefox起浸染,写法如下:

d: 只针对IE7起浸染,在css里前面加*+html,如:
*+html #left {
clear:both;

C: 图层float实现页面结构,碰着的浏览器问题
下面图A是IE6里的一个div, 宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我?#24039;?#35745;师在现实建造过程傍边带来问题,因为有的时辰我们要设置一个div高度为5px,用于放置一张布景图片,在IE6里就会?#24418;?#39064;。IE6的显示连结在了最低高度一个br,如图c,在同样设置height:5px;情形下,膳缦沔是firefox显示下面是IE6。解决的体例是在div里设置一下line-height:0px;


}

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 北京单场360比分直播即时 篮球比分直播90vs新浪 梦幻西游代跑镖赚钱吗 加拿大快乐8作假吗 2018码报图片 网上传是怎么赚钱吗 股票融资费用_杨方配资平台 丹东福彩中心投注站 诚信彩苹果 江苏7位数最新开奖结