[Super Useful] DIV positioning problem in CSS settings of IE6 and IE7 (transfer)_html/css_WEB-ITnose

具体的也说不清楚，可是能浮动的问题，也可能是你给了填充边界的问题。

下面是14条特殊情况你看一下是哪个问题出错了这些仅供参考：

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a.

b.

c.

d.

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，

，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。

8.img 下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

9. 失去line-height。

文字

，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效

dd

ff

11.ie Under overflow:hidden, the absolute layer position:absolute or relative layer position:relative is invalid. Solution: Add position: relative or position: absolute to overflow:hidden. In addition, ie6 supports overflow-x or overflow-y features, but ie7 and ff do not support it.

A serious bug under 12.ie6. If the float element has no defined width, and if there is a div inside that defines height or zoom:1, the div will fill the entire row, even if you give it a width. If the float element is used as a layout or complex container, it must be given a width.

A bug under 13.ie6, the absolutely positioned div contains a relatively positioned div. If the height of the relatively positioned div in the inner layer is given a specific value, the relative layer in the inner layer will have a width value of 100%, and the outer layer will have a width value of 100%. The absolute layer will be stretched. The solution is to give the inner layer a float attribute to the relative layer.

14.width:100% is very convenient to use in IE. It will search for the width value layer by layer upwards, ignoring the influence of the floating layer, and search under ff until the end of the floating layer. In this way, only the middle one can be given Just add width: 100% to all floating layers, which is tiring. Opera learned this well and followed ie.

-------------------------------------------------- -------------------------------------------------- ------------------

Ie's float bug (ie6, ie7) troubles front-end engineers. The most common phenomenon is: when floating The parent element of an element has a missing border when dragging the scroll bar. The solution to this problem is to make the floating element layout.

In many cases, the width of the page needs to be freely scalable. The width cannot be declared as a fixed value, but we can set *height:1%;, * is very important here, because * can only be parsed by ie7 and below, and ie8 does not recognize this type of writing, so you can use this writing method. Distinguish between ie8 and other versions of ie browsers. It is also a supplement to the popular ie8 beta1 hack on the Internet.

Some commonly used hack tests

* html p {color:red; } Support IE6 Not support FF IE7 IE8b
* html p {color:red;}　 Support IE7 IE8b Not support FF IE6
p {*color:red;} Support IE7 IE6 Not support FF IE8b

IE8 adds substring matching attribute selectors in CSS3. The specific rules are very similar to the matching in regular expressions:

E[att^='val'] //Sub The string starts with 'val'
E[att$='val'] //The substring ends with 'val'
E[att*='val'] //The substring contains 'val'

IE8 supports most basic CSS2.1 selectors. Those that are not supported include but are not limited to: [:first-line] and [:first-letter].
For the generated content part in CSS2.1, that is, adding text content by using pseudo-elements :before and :after, support is not complete in IE8.
As for opacity and RGBA, which are supported by almost other browsers, there is still no support in IE8.
The HACK originally used to distinguish IE is basically invalid in IE8 (such as *property:value, *property:value, etc.).
The original list-item whitespace bug of IE still exists in IE8.
The original IE z-index bug still exists in IE8.
A new bug occurs in IE8: when line-heigth is smaller than the normal value, the excess part will be cropped.
display:table is still not supported in IE8.
The transparent value of border is still not supported in IE8.
In IE8, @import only supports three levels of nesting.
Transparent border in IE8 is not supported
A new BUG is generated in IE8: line-heigth BUG
Hack only for IE8, it can be an attribute or a class

--- -------------------------------------------------- ---------------------------------------

BUG description:

A certain DIV on the page uses position:relative, combined with top=-25px and other elements for positioning. It behaves normally under FF and IE7, but in IE6 the DIV will scroll as the mouse scrolls.

Analysis:

This is a known BUG in IE6: when a position:relative element is included by a block-level element with the overflow:auto/scroll attribute, it will behave Out of postion:absolute behavior.

Solution:

1. Add the attribute position:relative to the containing block element.

2. Remove the position:relative attribute of the element, use the default static positioning, and achieve similar effects through attributes such as margin-top.

????????????????????????????????????????????? ?????????????????????

The end of ie6 is coming, which is undoubtedly a comforting good news for us front-end developers. But this The end is not imminent, so we still strive for the final victory, using various hacks and methods to avoid a bunch of bugs such as double margins, transparent backgrounds, repeated text, etc. in IE6. The following is reproduced from front-end observation (translated from www. 10 tips for fixing bugs in IE6 from sitepoint.com:
1. Use DOCTYPE
You should always use DOCTYPE at the head of each HTML file, and we recommend using the strict version, such as:

Or, For XHTML use:

The trickiest thing you need to deal with is IE6 going into quirks mode? It’s weird enough.
2. Set position: relative
Setting an element to "position: relative" can solve many problems, especially if you have encountered hidden or weirdly aligned boxes. Obviously, you need to be very careful because absolutely positioned child nodes may be repositioned as a result.
3. Set the floating element to display:inline
Floating elements with margin attributes may cause the famous IE6 double margin problem. For example, you specify margin-left for an element as 5px, but in IE6 it actually But it appears as 10px. "display:inline" will solve this problem, although it is not necessary, your CSS will still be valid.
4. Set an element to hasLayout
Many IE6 (and IE7) rendering problems can be solved by setting the element's hasLayout. This is an IE internal property (hidden by IE, for more information about haslayout, see here), used to determine how content is laid out and positioned relative to other elements. Setting hasLayout may also be necessary if you need to make an inline element (such as a link) a block element, or apply a transparency effect.
The simplest way to set hasLayout is to set a height or width for CSS (zoom can also be used, but zoom is not part of the CSS standard). We recommend setting the actual size, but the problem is that this is unrealistic and you may need to use "height:1%". If the parent element does not set a height, the actual height of the element is not affected, and hasLayout is enabled at this time.
5. Fixed duplicate text bug
Complex layouts can trigger a bug where the last characters of floating elements may appear under clear elements. There are a few workarounds, some are perfect, but some trial and error is necessary: ​​
. Make sure all elements use "display:inline;"
. Use a "margin-" on the last element right:-3px;"
. Use a conditional comment for the last item of the floated element, such as:

. Use an empty div at the last element of the container (it is also necessary to set the width to 90% or similar.
>>>>> >You can also visit positioniseverything.net to view a complete introduction to this issue
6. Only use the tag on clickable and hoverable elements
IE6 only recognizes the CSS hover effect on the a tag. .
You can also use them within JavaScript-based components to keep them keyboard-friendly. There are some alternatives, but the tag is more reliable than the others. >7. Use !important or advanced selectors to distinguish IE6
Without using traditional hacks or conditional CSS in extra files, it is still possible to write feasible code specifically for IE6, such as minimum height. Define it through this code:

#element {

min-height: 20em;
height: auto !important;
height: 20em;
#element[id] {
height: auto;
}

8. Avoid percentage units

Percentage will confuse IE unless you can accurately control the size of each parent element. Best prevention. You can continue to use percentages in other browsers via !important, like:

body {

margin: 2% 0 !important;
margin: 20px 0;
}
9. Test early and keep testing
Don’t wait until your site or app is complete to test IE6; problems may be worse and take more time to fix if your site works in Firefox. and works fine in IE6, then there will generally be no problems in other browsers
10. Refactor your code
What often happens is that fixing a bug takes longer than rethinking a layout problem. time. Small changes to the HTML and some simple CSS often work better. This may mean you give up perfectly good code, but there will be fewer long-term problems and you'll have a better idea of ​​how to handle them in the future.

-------------------------------------------------- -------------------------------------------------- ---------

Let IE6 support PNG format images

Usage:

Copy the following code in notepad first, and then save it as pngbehavior .htc (the name can be any):

<script><br> </p>var supported = /MSIE ((5.5)|[6789])/.test(navigator.userAgent) &&<p>navigator.platform == " Win32";<br></p> <p>var realSrc;<br>var blankSrc = "blank.gif";<br>var isPrinting = false;</p> <p>if (supported) fixImage();</p> <p>function propertyChanged() {<br>if (!supported || isPrinting) return;</p> <p>var pName = event.propertyName;<br>if (pName != "src") return;<br>// if not set to blank<br>if (!new RegExp(blankSrc).test(src))<br>fixImage();<br>};</p> <p>function fixImage() {<br>// get src<br>var src = element.src;</p> <p>// check for real change<br>if (src == realSrc && /.png$/i.test(src)) {<br>element.src = blankSrc;<br>return;<br>}</p> <p>if ( ! new RegExp(blankSrc).test(src)) {<br>// backup old src<br>realSrc = src;<br>}</p> <p>// test for png<br>if (/.png$/i.test(realSrc)) {<br>// set blank image<br>element.src = blankSrc;<br>// set filter<br>element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." <br>"AlphaImageLoader(src='" src "',sizingMethod='scale')";<br>}<br>else {<br>// remove filter<br>element.runtimeStyle.filter = "";<br>}<br>}</p> <p>function beforePrint() {<br>isPrinting = true;<br>element.src = realSrc;<br>element.runtimeStyle.filter = "";<br>realSrc = null;<br>}</p> <p>function afterPrint() {<br>isPrinting = false;<br>fixImage();<br>}</p> <p></script>

最后在你的css文件里面加上这么一段代码：

img {behavior: url("pngbehavior.htc");}