IE6中浮动双边距bug
2016-03-02 09:47
204 查看
想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了,却发现呈现出的效果压根不是你所期望的那样,漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时,却压根找不 出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了,因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的?咱 们双该如何解决呢,别急,请听我慢慢道来:
[align=left] 一:什么是双边距Bug?[/align]
[align=left]一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左 边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍![/align]
[align=left]先来看一下图片:[/align]
[align=left] [/align]
[align=left] 在下面的实验中,我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:[/align]
[align=left] 看起来是很简单的吧?但是当我们在IE6中查看时,却会发现左侧外边距100像素,被扩大到200个像素。如下图:[/align]
[align=left] [/align]
[align=left] 二:该如何来修正这个Bug?[/align]
[align=left] 这个修正其实很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:[/align]
CSS代码如下:
以上方法是我在网页设计中总结出来并不断实践过的方法,希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益!
[align=left] 一:什么是双边距Bug?[/align]
[align=left]一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左 边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍![/align]
[align=left]先来看一下图片:[/align]
[align=left] [/align]
[align=left] 在下面的实验中,我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:[/align]
|
[align=left] [/align]
[align=left] 二:该如何来修正这个Bug?[/align]
[align=left] 这个修正其实很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:[/align]
CSS代码如下:
以下为引用的内容: .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; } |
相关文章推荐
- 【软件工程】0302 软件工程
- 【leetcode】【63】Unique Paths II
- 关于切圆角的性能问题
- 单点登录和cas
- SQL Server 2008下日志清理方法
- python的【字典dict】:创建、访问、更新、删除;查看键、值、键值对;遍历;排序
- Official Program for CVPR 2015
- iOS---圆角这个可恶的帧数杀手
- JSTL的c:forEach标签
- JS实现为排序好的字符串找出重复行的方法
- 成都Uber优步司机奖励政策(3月2日)
- Solaris 11, gcc 的安装
- 0302-对IT行业的感思
- java回调函数的使用
- 分段选择器(好用的第三方)---滑动选择对应不同的控制器页面--点击选择不同的控制器页面
- Linux 环境配置
- 堆栈溢出问题 test dword ptr [eax],eax probe page.
- kaggle实战之Titanic(2)-分类器的选择与实现
- 关于类已经定义了的原因
- 树的直径 poj 2631