CSS IE6、7下关于Position的一个bug问题分享

又好久没来了,小码哥甚是想念 想念我的人。由于近期工作中跟CSS打交道较多,所以偶尔会碰到有关它的一些问题,CSS很强大,尤其是后来的CSS3。鄙人正在学习中,如果就所遇到的问题,分析有偏差,望大家海涵哈!!下面就说说我刚刚遇到的一个问题,也许某些前辈大拿们会在心里BS我,不过对我来说,都是收获!嘎嘎,,

总所周知,我们都知道CSS中的定位position属性是一个相当重要和特殊的属性。它分别有一下几个属性值:

  1. position:relative;
  2. position:absolute;
  3. position:fixed;
  4. position:static;
  5. position:inherit;

当然,我们常用到的应该也就前三个,后两个很少用到。

下面我就说说关于前两个属性值在运用时,IE6、7下遇到的一个bug。

记得我以前刚接触CSS时,总感觉定位很好用,就像下棋似的,想定到哪里就定到那里。那是因为我不知道position也有其忌讳或敏感的属性。如浮动float。

在这里我们先不谈他们俩之间的矛盾,先看看这个看后直呼原来如此的问题吧:

在IE8以下的版本中,要是用不好position属性,就会常常遇到页面错位的问题;而这些问题,在标准浏览器下,是体现不出来的。这就对我们前端新手来说,我们只做页面的时候,往往运用标准浏览器火狐等来实时调试(一般都是firebug)而造成IE最后不适应的。所以,大家要在工作中,实时的用多浏览器进行调试,以便出现问题能够及时解决。(不然等页面做完后在回头解决问题,你就KB了)!

下面先看一下问题效果图吧:

1、这是在FF下正常显示的

2、这是在IE6、7下的错位不正常显示

当然以上两种显示效果的代码是绝对一样的。

下面是CSS中代码:

里面的header类是父类,后面的txt是子类,他们间运用到了position中的相对定位(relative)和绝对定位(absolute)。在这样的代码下,FF和IE6、7分别显示如上页面。在我解决问题时,着实让我纠结了一阵子。

当时,我是一步一步倒着排查的,结果排查到了.txt类下的代码时,发现font-style属性的有无竟然能解决IE6、7下的错位问题,我懵了,,,这尼玛font-style属性时管字体样式的,和这布局有毛关系!!但是,IE6、7就是尼玛这么吊,,,有font-style属性,就错位,没有就正常。我日了,,,,正当我纠结时,我老大来到我后面帮我分析了一把,她老人家也说不可能是font-style属性的事。她这么一说,我心中更有底了,看来我分析错误还是分析对了,不是font-style的事,嘎嘎

但是到底是哪的问题呢,最后老大看了我的代码后,说道,你的主题内容(也就是带有相对定位relative的父类)有宽度width值得设置吗?我说没有,,她说你加上一个宽度值看看。结果有了下面的代码:

大家看我用红框圈出的属性,就这一个东东,嗨,尼玛还真就解决问题了,这才尼玛是问题的根本所在,什么font-style?它尼玛就是打酱油的,日了,,,

后来老大就告诉我说,在IE6、7下,用position属性一定要谨慎,把能用到的且不影响布局的属性用全了,别偷懒。因为,你一偷懒,就像上面代码似的,就因为你偷懒少写了一个width属性,尼玛的IE6、7就分析不出相对、绝对定位是谁相对,谁绝对了!!

就此问题,小码哥总结如下:

在IE8一下的浏览器中,如果遇到要用到position中相、绝对定位时,一定要保证父子级中都要有宽度值width属性。以防止IE8以下浏览器因为父子级没有设定宽度值width而解析不出他们之间的关系。

最后,想说的是,本文为小码哥精心原创,如有转载请注明出处!谢谢

时间: 2024-11-11 16:31:02

CSS IE6、7下关于Position的一个bug问题分享的相关文章

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

首先我们来看一个代码: 复制代码代码如下:<div id="layer1″ style="margin:20px; border:1px solid #F88; width:400px; "> <div id="layer2″ style="position:absolute; background-color:#ccc;">Absolute (layer2)</div> <div id="la

在chrome下-webkit-box布局的一个bug

chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-webkit-box的自动根据浏览器窗口大小自动排列的智能布局, 所以我也入了坑, 坑是这样的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

[译] 关于CSS中的float和position

原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要更复杂的排版要求,可以考略使用其他方法,比如使用相对定位和绝对定位. 在这篇文章中,我们首先要讨论元素浮动:然后,我们要讨论如何使用x,y和z轴控制元素的位

如何在IE6下实现position:fixed效果

如何在IE6下实现position:fixed效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.由于IE6并不支持position:fixed,所以导致很多好的效果都无法实现,但是在IE6下并不是不能够实现此中效果,下面就通过一段实例介绍一下如何实现此种效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="autho

IE6 下关于Position:absolute;属性对同级元素的影响问题

今天小码哥做一个专题页面的时候,碰到一个关于IE6下position:absolute:属性对同级元素的margin属性有影响的问题.虽然,作为前端人员,IE6下的Bug问题,始终让人头疼不已.但生活在Zhong国的码民们只能继续忍受. 言归正传,是什么问题呢? 即:假如在一个设有position:relative:相对定位属性的div盒子里,同时放另外两个div块级元素layer2,layer3.layer2设有position:absolute:属性,layer3设有margin:30px

解决IE6浏览器下position:fixed固定定位问题

2010年4月15日 像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求.当其他浏览器都正常显示的时候,只有IE6不那么完美.该元素的位置是通过"left", "top",

ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知

代码: <!DOCTYPE html> <html> <head> <title>ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知</title> <style> * { padding: 0; margin: 0; } table tr { position: relative;float:left;overflow:hidden;z-index:1;height:100%;widt

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord

HTML/CSS IE6、7兼容性问题、bug总汇

IE6,7下li.img的间隙------------------- 在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生几px的间隙 解决办法: 1.给li加浮动,给其父级清浮动 2.给li加vertical-align:top; 当IE6下最小高度问题,和 li的间隙问题共存的时候 给li加浮动 img元素在本身没有浮动也没有宽高的时候,会距离父级底部有几px间隙 解决办法: 1.给img加浮动,给其父级清浮动 2.给img加vertical-align:top; IE6