文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络专栏firefoxCSS在IE与Firefox下不同的解析及解决方案
精品推荐
特别推荐
·下载:Firefox 4.0 Alpha 1 Pre版
·推荐一些实用的Firefox扩展
·帮你解决Firefox无节制内存占用的问题
·不可或缺 20个必备的Firefox插件
·提高做火狐firefox推介效果的技巧代码
·Firefox v2.0.0.9 简体中文版下载
·Javascript在IE和FireFox中的不同表现
·Firefox火狐浏览器常用快捷键大全
·Firefox明年目标:30%市场份额
·101件Firefox能而IE不能做的事
热点TOP10
·Firefox 必装的几款 NB 插件
·改变Firefox显示字体的大小
·Javascript在IE和FireFox中的不同表现
·下载:Firefox 4.0 Alpha 1 Pre版
·CSS在IE与Firefox下不同的解析及解决方案
·FireFox 如何用Javascript 修改状态栏
·绿色版Firefox--RedFox试用
·Firefox的32个插件介绍
·Firefox 使用常见问题和解决方法
·FireFox 3.0 Beta 5 简体中文版发布

CSS在IE与Firefox下不同的解析及解决方案

日期:2008年6月4日 作者: 查看:[大字体 中字体 小字体]



重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

最后,修复办法!

直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。

现在如何来做?

研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:

9.5.1 Positioning the float: the 'float' property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了"inline"修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;}

(出处:清风学院


上一页 [1] [2] [3] 




上一篇:网页字体font-size的控制 em与px的终极PK!

下一篇:使用 DIV+CSS 创建固定宽度的布局
相关文章:
·不用重装XP系统就可以解决全部故障
·XP系统运行慢?小编自用7招解决
·解决与HTTP 500 – 内部服务器错误错误信息有关的问题
·笔记本电脑无线上网解决方案大比拼
·0X000000该内存不能为read的解决方法
·不同宽带模式接入下的路由器如何设置
·解决电脑死机故障攻略
·第一次做爱以后,男女大不同
·电脑不启动故障诊解决办法
·电脑使用一段时间后会变慢原因解析
相关软件:

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot