Home > Developer > Web Develop
1. A few pixels of blank space below the picture
Problem Description: This problem is often seen under IE6 and FF (Firefox), such as <div>Src= ""/></div> this picture will have a blank space below,
Workaround: Give the graph a vertically oriented property such as: Vertical-align:
Top (any one on the line middle); This problem extends to the same problem as the object (video) and textarea in Firefox, as well as the solution. Careful friends will find that in the second section of Ahuing's reset code there is a global definition object,textarea,img{vertical-align:
Top;}
2.ie6 double margin Bug (bilateral distance)
Problem Description: This is IE6 a famous bug, when an element is floating on one side, if there is margin in the same direction, the IE6 will produce double margin. Example: <div
Style= "Float:left;margin-left:
10px; " ></div> show margin-left:20px distance under IE6
Workaround: Add a _display:inline: property, such as <div
Style= "Float:left;margin-left:10px;_display:
inline; " ></div>
A 3-pixel bug occurs between floating and non-floating elements under 3.IE6
Problem Description: This is also ie6 a famous bug, when an element floats, the same level of text does not float, under the IE6 they will produce a 3-pixel bug. Example: <div>Style= "Float:left;"
src= ""/> Summary Summary summary </div>, picture and text will appear 3 pixels
Workaround: Method One, two elements are floating, such as: <div>Style= "Float:left;" src= ""/><span style= "float:
Left; " > Summary Summary Summary </span></div>; method Two, this design when the general picture and text to have clearance, do a IE6 hack on the line, such as: <div>Style= "Float:left", "src=", "/><span style=" margin-right:5px;
_margin-right:
2px; " > Summary Summary Summary </span></div>
4.li bottom blank line in IE
Problem Description: When Li has more than two floating elements, there is a gap between Li, for example
<ul
class= "Tlist" >
<li><span style= "float:
Left; " > Column </span><a style= "float:left;" href= "#"
target= "_blank" > title title </a></li>
</ul>
Workaround: This problem is similar to the first one, and the workaround is the same as adding a vertically oriented attribute on Li, for example:
<ul
class= "Tlist" >
<li style= "vertical-align:top;" ><span
Style= "Float:left;" > Column </span><a style= "float:left;" href= "#"
target= "_blank" > title title </a></li>
</ul>
5.ie6 style comment After the failure is thrown
Problem Description: This is IE6
Strange phenomena that arise. This is due to the different encoding of the CSS and HTML, the following conditions will cause the comment below the style does not work:
1). CSS has Chinese comments
2).
CSS is ANSI-encoded
3). HTML is UTF-8 encoded
Workaround:
1).
Remove the Chinese comments, comment in English or a few more "*", this is ahuing in the previous tutorial, for example:/*** comments ***/
2). Unified CSS and HTML
The encoding
The second solution is recommended. Ps:css to uft-8 HTML for ANSI
There seems to be no failure.
6.ie6 occurrences of repeating characters (text overflow)
Problem Description: A container contains 22 sub-containers with a "float" style, the second container is greater than the width of the parent container, or the parent container width minus the second container width is less than 3, there is a comment before the second container (which is why this bug is also called "IE6 comment Bug"). For example, the following code:
<! DOCTYPE
HTML PUBLIC "-//w3c//lid XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid" >
xmlns= "http://www.w3.org/1999/xhtml" >
<meta
http-equiv= "Content-type" content= "text/html; CHARSET=GBK "
/>
<title> title </title>
<style>
*{margin:
0;padding:0;font-size:12px;}
. a{width:205px;}
. B{float:left;width:
50px; Background:black;color: #fff; Margin-right:5px;overflow:
Hidden;}
. C{float:left;width:150px;background:
Red;}
</style>
<body>
<div
Class= "a" >
<div
class= "B" > Test test test Test testing test test 111111111111</div>
<!--notes
-
<div
Class= "C" > Testing test test test test test test 2222222222</div>
</div>
</body>
Workaround:
Why the repetition of the text, who did not say clearly, including the official, this problem, ahuing only in the debugging style to a friend saw, their own code has not seen, so know this bug a bit late, ahuing personally think, IE6 will comment also as content exists.
How to eliminate repeating text, as long as any one of the above conditions are not satisfied,
Changes the structure, does not appear "a container contains 22 sub-containers with a" float "style.
1). Decrease the width of the second container to a value greater than 3 for the parent container width minus the second container width.
2). Remove all comments.
3). Add one or more <div after the second container
Style= "Clear" ></div> to resolve.
4). Add position:relative to the label of the overflow text; properties
6.png picture in the IE6 under the transparent or background dimmed bug;
Problem Description: The PNG image here refers to the 32-bit and 24-bit, 8-bit PNG image transparent IE6 is supported.
Workaround:
1) using filters, the syntax is as follows
. Image-style
{background-image:
None;filter:progid:dximagetransform.microsoft.alphaimageloader (src= "Filename.png",
sizingmethod= "scale");
}
Note: The use of filters requires lossy performance.
2) make a separate. gif picture (or 8-bit PNG image) for IE6, and make a hack
. image-style{
Background:transparent URL ("filename.png") no-repeat scroll 0
0;_background-image:url ("Filename.gif");
}
This method only needs to store more than one copy of the. gif format in transduction. This method is generally used.
7. Let Position:absolute pop-up layer on flash
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase= "http://download.macromedia.com/pub/shockw
ave/cabs/flash/swflash.cab#version=6,0,29,0 "
Width= "height=" >
<param name= "movie" Value= "flash.swf"
/>
<param name= "Quality" value= "High"/>
<param name= "Wmode"
value= "Transparent"/>
<embed src= "flash.swf" wmode= "Transparent"
quality= "High" pluginspage= "http://www.macromedia.com/go/getflashp
Layer
Type= "Application/x-shockwave-flash" width= "300"
height= "></embed>"
</object>
Not much to say, copy the code directly, and then change the two flash.swf to their own on the line (mainly this code <param
Name= "wmode" value= "Transparent"
/>)
8.position:absolute locating a bug with left and bottom relative outermost window (body) located under IE6:
Problem Description: Because under IE6, the relative positioning element does not get the Haslayout attribute inside ie, so the new positioning context is not created, so the absolutely positioned element is positioned relative to the viewport.
Workaround:
1) Setting the _height:1%;//small height will not affect the actual height; for example: <div
Style= "position:relative;_height:1%;" Content content contents of > Contents Content <div
Style= "Position:absolute;left:10px;top:
10px; " ></div></div>
2) relative positioning of ancestor elements set over height and width.
3) Relative positioning of the ancestor element set _zoom:1, used to trigger the element's layout property.
9.position:absolute positioning in IE6 under the Z-index failure of the bug:
Problem Description: Set Z-index invalidation for floating layer under IE6, for example: normal block 1 will be above Block 2, but IE6 not
<div
Style= "position:relative;" ><div style= "Position:absolute;z-index:
10; " > Block 1</div></div>
<div style= "Position:
Relative "><div style=" Position:absolute;z-index:
5; " > Block 2</div></div>
WORKAROUND: IE6 only recognizes z-index of the parent layer, so we can add a z-index to the parent layer as well.
<div
Style= "POSITION:RELATIVE;Z-INDEX:10;" ><div style= "Position:
Absolute;z-index:10; " > Block 1</div></div>
<div
Style= "position:relative" ><div style= "Position:absolute;z-index:
5; " > Block 2</div></div>
Another solution is that the z-index of the tag behind it is always higher than the z-index in front of it, and in some cases the foreground order of the two can be swapped
10. A bug that is not supported for position:fixed under POSITION,IE6
Problem Description: Position:fixed is mainly used as a customer service-like floating layer, but IE6 is not supported, the problem is that the fixed element IE6 under the absolute positioning position is for the HTML element, and the scroll bar is for the BODY element
Workaround:
Using absolute positioning to simulate a
Body{background-image: ("Xx.gif");} /* A non-existent picture that is completely transparent */
. Fixed{_postion:absolute;expression (Eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight))}//Bottom
Expression (eval (document.documentElement.scrollTop));/* head */
Expression (eval (document.documentelement.clientheight/2+document.documentelement.scrolltop-80));/* Right side */
11. Another position problem, IE6 let the absolutely positioned layer on the top of select
Problem Description: The absolutely positioned layer under IE6 regardless of the value of its z-index to how large it is always under the Select control
Workaround:
1) control the display and hiding of select with JS (hide Select when the popup layer is present), but when the div only covers half of the Select, the whole will be hidden and not suitable for some situations.
2) Use the IFRAME to cover the Select,iframe z-index than select High, so that the pop-up layer and the IFRAME coincident.
<div
Style= "Position:absolute;" ></div>
<iframe scrolling= "No"
Frameborder= "0" style= "width:100px; height:100px; top:320px; left:60px;
Position:absolute;
z-index:-1; " ></iframe>
12. Haha, last position problem, IE6 under Position:absolute not shown
Problem Description: For example: The following code, A1 absolute Positioning, A2,a3 floating, note the style when the box width-(A2+A3) <3, A1 will not display, you can directly copy the code to save the preview, this situation is very small, but it appears, it will let you touch the direction
<style>
*{margin:
0;padding:0;font-size:12px;}
. Box{position:relative;background:
Black;color: #fff; height:50px;width:100px;}
. A1{position:
absolute;background:red;left:0;top:30px;}
. A2{float:left;background:
purple;width:48px;height:40px;}
. A3{float:left;background:gray;width:
50px;height:40px;}
</style>
<div class= "box" >
<div
class= "A1" > Block 1</div>
<div
class= "A2" > Block 2</div>
<div
class= "A3" > Block 3</div>
</div>
Workaround:
1) Add a clear floating code between the absolutely positioned layer and the floating layer, for example: <div
Style= "Clear:both;height:0;overflow:hidden;font-size:0;line-height:
0; " ></div>
2) The absolute positioning of the layer can be placed on the last side of all floating layers, and then on the absolute positioning of the layer to add a clear floating, such as:. A1{position:
Absolute;background:red;left:
0;top:30px;clear:both;}
13.a links Click on the unsightly outer frame method:
IE6 under the tag set hidefocus=true, other browsers to a setting: Outline:none
For example:
<a
Href= "# # #" hidefocus= "true"
Title= ".." />
A{outline:none}
14.IE6 does not support min-height/max-height/min-width/max-width bug
Problem Description: None
Workaround: Simulate it based on the characteristics of IE6
Height:auto!important;
Min-height:
x px;/* Required Minimum Height */
Height:x
Px
A bug that 15.ie6 the border is disconnected
Problem Description: When the element inside the border is agitated, there is no clear float, and the sliding scrollbar will cause a wire break problem. For example
<style>
. Box{border:
1px solid #ccc;}
. plist Li{float:left;}
</style>
<div
class= "box" >
<ul class= "Plist" >
<li><a href= "#"
target= "_blank" >Src= "Pic/s.png"/></a></li>
<li><a href= "#"
target= "_blank" >Src= "Pic/s.png"/></a></li>
<li><a href= "#"
target= "_blank" >Src= "Pic/s.png"/></a></li>
</ul>
</div>
Workaround: The reason is that box has no haslayout
1) Add a property _height:1% or _zoom:1, this is the method of ahuing characters commonly used
2) Clear float can also, under the UL add <div
Style= "Height:0;overflow:hidden;clear:
both; " ></div>
3) Add a background color to the box.
16.
Pseudo-Class in IE6: Use of hover and bug
Problem Description: IE6 is not supported except for the A tag: hover, for example: <style>.test:hover{background:
red;width:50px;height:50px;} </style><div
class= "Test" ></div>
Workaround:
1) Display:black a tag, for example: <style>.test{display:
Block;} . Test:hover Div{background:red;width:50px;height:
50px;} </style><a class= "Test"
href= "# #" ><div></div></a>; but it doesn't seem to fit the standard
2) solve with JS or JQ
17. The original IE6 is able to support!important
. demo
{color: #F00!important; color: #000;
}/*IE6 Display Error Understanding:. Demo display is black */
/* and the following IE6 are correctly understood:. The demo is shown in red */
. demo {
Color: #F00!important;}
. demo {color: #000;
}
The size of the space under 18.ie is not the same as FF
Problem Description: Sometimes we need to use empty glyd in the layout of the aligned words, such as: Secret Code and user name, so that can be aligned, and on IE is not necessarily the case
Workaround: Set the font to Arial, i.e.: font-family:
SimSun;
19. Consecutive English or digital in the container, do not wrap automatically
Problem Description: <div style= "width:
50px; " >wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
Workaround: <div
Style= "width:50px; Word-wrap:
Break-word; " >wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
20.ie6
div height cannot be less than 10 pixels resolution
When using CSS to define a div's height, it can be displayed normally under IE 7 browser. But in IE 6, the height
It cannot be defined below 10px. This is a bit like the table. The workaround is as follows:
Method One: Define the overflow property. For example, to define a height of 2px
The line.
<div
Style= "Height:2px;overflow:hidden;background: #000000; width:778px;" ></div>
Law II: the DIV
The font Size property of FontSize is set to be the same as the height.
<div
Style= "Height:2px;font-size:2px;background: #000000; width:778px;" >&nbps;</div>
DIV+CSS Common browser compatibility issues and workarounds
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
