问题提出:在IE中,ul的默认边距是margin,而在FF中,ul的默认边距是padding,当我们单独定义margin或padding时,往往不能再两个浏览器中达到相同的效果。经过几次折腾,结合网上找的材料,将ul标签左边空白不一致问题的解决方法总结如下:
方法1:hack方法
在IE中使用margin-left:0px;在FF中使用margin-left:-20px。
方法2:设置初始值(最佳方案)
使用标签选择符设置统一的初始值。
一般来说,先定义
UL{
margin:0;
border:0;
padding:0;
}
能解决大部分IE/firefox的列表错位问题
另外:IE6 Li标签左边多出16像素(px)宽度的BUG
偶然发现,IE6的Li标签左边会多出16px的宽度,即使把list-style-type设置成none。而在Firefox中却是正常的(IE其它版本没测试,不过应该是和Firefox一样的)。
经验证,其实是IE6的list-style-position属性造成的,默认情况下,Firefox中list-style-position值为outside,即列表项符号会在LI标签的外面显示。而IE6的默认值则相反(inside)。不过这还不是问题关键,IE6完全是属于占着茅坑不拉屎的那种,即使你不显示列表项符号,即把list-style-type设置成none,它依然会保留列表项符号占用的空间。所以无论你给LI的设置margin:0或者padding:0,你都会发现Li左边会多出16PX的空间。
既然知道问题的关键,解决起来就不难了,直接设置
list-style-position:outside;
结论:做样式设计时,经常轻视全局初始样式的设置,结果由于不同浏览器对语法的解析存在不同,在后期进入局部详细设计时被折腾够呛。
分享到:
相关推荐
解决IE6 IE7 Firefox中li兼容问题
这要是对IE6和firefox的兼容性做的一些总结
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题,解决以上浏览器存在的兼容问题
CSS在firefox和ie下的兼容性问题,是最让网页设计师头痛的事。在IE下测试明明是正常的,到了火狐下就变样了。这样一来还得重新修改,最怕改好后在IE下又不兼容了。这里介绍一下css在火狐和ie下的兼容要点。
Firefox浏览器不兼容的JS脚本,大概列出了我们经常用到的的js脚本在Firefox和IE中的区别
程序稍微变动就支持 默认IE 360浏览器 腾讯TT 傲游 Avant Browser 世界之窗 GB绿色浏览器 MY IE 极速浏览器 ...另外还支持Firefox火狐浏览器URL的获取。 如果您还需要支持其它浏览器,请联系加我的QQ:25158172
经过三天的苦战,查询无数的国外网站终于实现了对IE和FireFox浏览器的URl地址实时监控。利用API和DDE分别对IE和FireFox进行了浏览器地址获取,完整的源码程序,与大家分享学习。后期将完善,实现对IE,FireFox,360,...
JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)
CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)
部分通用浏览器解决兼容性的方法。firefox、ie等。
程序支持下述9种常见浏览器: 默认IE 360浏览器 腾讯TT 傲游 Avant Browser 世界之窗 GB绿色浏览器 MY IE 极速浏览器 另外还支持Firefox火狐浏览器URL的获取,效果极佳。 说明一点,这是delphi 7 开发的绿色软件。
JavaScript在IE和Firefox(火狐)的不兼容问题解决
JavaScript画线,画图兼容FireFox,IE等浏览器
是用delphi7编写的,专门针对火狐Firefox浏览器。部分源码如下: procedure TForm1.Button1Click(Sender: TObject); var a,b:string; begin //火狐浏览器在最小化或被其它窗口挡住,仍然可以获取成功。 if ...
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
页面放大缩小代码,兼容所有浏览器,代码简单,易学易用。
渗透系列:导出Firefox浏览器中保存的密码
此文档帮助jsp开发人员解决在各浏览器中不兼容问题,提出解决方法;此文档可解决Firefox,谷歌,百度和IE6/7/9浏览器的兼容问题