CSS IE 和 Firefox 的区别

2016-02-19 17:48 5 1 收藏

图老师小编精心整理的CSS IE 和 Firefox 的区别希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的hack,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了hack的办法,你就掌握了一切,我们并不是Hack的奴隶。

div ul li 的嵌套顺序

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

今天只讲一个规则。就是divulli的三角关系。我的经验就是div在最外面,里面是ul,然后再是li,当然li里面又可以嵌套div什么的,但是并不建议你嵌套很多东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是div里面放li,而不用ul的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来Hack它们,但是你会烦得要命。

具体嵌套写法

遵循上面得嵌套方式,divulli/li/ul/div 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让li标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅hack一两个地方,而且通常这种hack可以适应各种地方,不需要你重复在不同的地方调试不同的Hack方式–减轻你的烦恼。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要hack的地方,而统一Hack。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1616098.html

延伸阅读
标签: Web开发
其实,以前从来没有接触过CSS相关的内容,都是在做业务的编程,从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中,作为CSS菜鸟的我也接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷,所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS的区别,给大家借鉴。 首先,大家都知道,IE和Fi...
标签: Web开发
    这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的几 个方面。     1. CSS “float” 属性     获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 backg...
标签: Web开发
我们讨论的主题 CSS网页布局 ,最令大家头疼的问题就是浏览器兼容性,虽然webjx.com介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefox中二十三个不同点,希望对大家的学习有所帮助。 一、document.formName.item("itemName") 问题   问题说明:IE下...
标签: Web开发
今天被在修改CSS的时候,突然碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为了一句CSS写多一个文件,或者在header上添加注释,那显然不是懒人的习惯做法。结论如下: selector{ property:value; /* 所有浏览器 */ property:value\9; /* 所有IE浏览器 */ +property:value; /* IE7 */ _prope...
标签: Web开发
XSLT 中 document() 函数的作用是用来访问扩展XML文档中的节点。       它的语法是 node-set document(object,node-set?)       参数 object (必须): 定义一个链接到XML文档的URI;       参数 node-set (可选):用于解释相对URI。   &n...

经验教程

389

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部