CSS布局教程

基于web标准的网站设计指南

« IE条件注释功能css按钮 »

ul的不同表现

问题起因,m列表对象也是容易在IE与Mozilla/Fh'cfox之中发生问题的对象,主要原因源自Fircfox对ul对象的默认值设置造成的,在了解这个问题前,先来看一下问题的起因,我们首qQXHTML与CSS代码。当前的代码非常简单,仅仅去除了ul的列表圆点,看一下在两个浏览器中预览效果。标准状态下两个浏览器的显示都很正常,多关键在于我们对ul接下来的设置,ul放置到合适位置对寸CSS进巧亍修改。预览效果后发现,IE中的ul已经与div靠齐了,天津网站建设天津网站制作,而Fircfox中的ul却丝毫不动这是为什么呢?不妨把样式表修改一下再看看。次把margin-leR替换成了padding-left,再来看看预览效而这次的效果又刚好相反,Firefox实现了靠左,而却没有任何效果。
解决方案,通过这两个代码的对比,相信大家应该能理出头绪了。对一部分对象有默认的属性,如hi~h6这些对象,它们本身就带有大字号、加粗样式以及一些边距效果,也是如此,如同不加任何属性时的预览效果一样,ul对象默认情况下是有边距的。但是通过这两个例子我们能够知道,在礪中,ul的默认边距是margin造成的,而在Firefox中,ul的默认边距是padding造成的,因此当我们单独定义margin与padding时,都不能够在两个浏览器中达到同样效果,这就是ul在不同浏览器下表现不同的问题所在。当然也可以使用hack方法,在IE下但margin-left:Opx;时,让Firefox下margin-let~:-20px左右,这样实现了二者相同,这可以是一种解决方案,不是核心解决方案。建议是,在设计带有ul对象的网页时,使用标签选择符,先统一ul的边距。例如,在CSS里顶部的位置加入以下代码:这样,页面中的所有ul对象,都没有了margin及padding值,当需要针对某一个ul进行margin或padding操作时,由于它们都已经田该代码设置为Opx了,所以再进行margin或padding时,都从0开始进行计算,就不会再出现表现不同的状态了。
 

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号