IE6绝对定位的bug及其解决办法
发布时间:2011-03-30 12:31:00
IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:
<!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>cidianwang</div>
</div>
<!–IE6下的left定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>cidianwang</div>
</div>上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。
2、给父层设置宽度(width)。
<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>cidianwang</div>
</div>
<!–解决方法2 设置width–>
<hr />
<div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>cidianwang</div>
</div> 下面的这段代码在IE6下,bottom定位错误:
<!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>cidianwang</div>
</div> 解决办法和left定位类似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。
<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a><br />
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>cidianwang</div>
</div>
<!–解决方法2 设置height–>
<hr />
<div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”>
<a href=”http://www.cidianwang.com”>http://www.cidianwang.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>cidianwang</div>
</div>
IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。
下列的CSS属性或取值会让一个元素获得layout:
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值
猜你喜欢
- 在这篇asp之数学函数里,我们将会以表格的形式,让大家了解到关于ASP中能用到的数学函数,里面包括一个数的绝对值、一个数的平方根
- 译者按:在iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的HIG(大概是为了配合Android 4.0 Ice
- 代码如下:<html> <head> &nb
- 在IE浏览器调试代码,我们可以选择使用 IE WebDeveloper但是我个人用惯了ff浏览器下的firebug,所以在网上搜了一下,如果
- 几个月来好像就现在暂时无需求,稍微轻松一下,然后在Q群中发现有人提问,怎么用CSS实现数学公式“四又二分之一”。对于这个公式个人
- 注意:安装时要保证Oracle安装目录不能带有中文字符(如果第一次安装出现“加载数据库错误areasQueries”的错误,一般是因为Ora
- 代码如下:CREATE DATABASE 临时的 ON ( NAME='临时的_Data', FILENAME='h
- oracle命令删除用户:connect / as sysdba; shutdown abort; startup;&n
- 编号标准宗地编码(landCode)所在区段编码(sectCode)1131001BG001G0012131001BG002G0013131
- '/***' 作 者 :冻结回忆'修改时间:2007-10-17'功能说明
- 在ASP中,FSO的意思是File System Object,即文件系统对象。
- 从前有三只小猪,长大自立了分别造房子住。老大搬来草堆堆出草屋,老二搬来木头搭出木屋,老三搬来砖头,砌墙,造烟囱,造出了坚固的砖房。一天晚上大
- 网上找了很多。貌似没什么好的解决办法。自己参考了下。把它直接整成一条SQL语句了。不过字段的格式只允许前面或者后面有字符。中间不允许出现字符
- 使用 Microsoft® SQL Server™ 2000,可以选择在一台计算机上安装 SQL Ser
- 非原创:英文版混乱的标记语言XHTML2/HTML5源文地址:漫画英文版源文地址感谢我的同事Kevin Jaw的翻译。他的博客地址是:Kev
- 主要代码如下: total = application("All
- 一看,C盘只有不到2M可用空间,一查原因,sqlserver安装路径下的log目录文件占了好大,5G多, 于是上网搜了下,解决了: 把与sq
- 阅读之前:在看文章具体内容之前,希望你可以 先打开IE8,打开http://www.taobao.com,然后在地址栏里输入:javascr
- CREATE OR REPLACE PROCEDURE PROC6338196642095312503719(输入新闻主题 Varchar2
- -------------- 函数检索 --------------trim函数: trim() lTrim() rTrim()校验字符串是