Home > Developer > Web Develop
Fix problem way: display:inline;
code example:
/*[ie6 and lower browsers double float hack]*/
div {
margin:10px;
Float:left;
width:100px;
height:100px;
display:inline;/* screen IE6 and Lower browser double float hack*/
}
Detailed Explanation:
Because floating elements are automatically displayed in chunks, the elements are set to Display:inline, which does not seem to work here, but it can be modified.
Fix problem way: margin-right:-3px;
code example:
#float {
Float:left;
width:100px;
height:100px;
BORDER:4PX Red Solid;
}
#flow {
BORDER:4PX solid blue;
margin-left:120px;
}
*html #float {
/* Filter, clear the 3-pixel gap to the right of floating elements in IE6 and earlier browsers */
margin-right:-3px;
}
*html #flow {
height:1%;
}
Detailed Explanation:
In IE6 and ie5.x browsers, as described in the preceding code. When the fixed width two column layout, if the left floating, the right column flow, the right column will be more than 3 pixels of width.
How to resolve:
#content {
/* Parent Element */
Background: #EEDC82;
margin:20px Auto;
overflow:auto;/* defines the parent element in a standard browser to be able to adaptively height */
display:inline-block;/* defining a parent element for inline block display forced auto-scaling in IE6 and earlier */
}
P
/* child element */
height:100px;
border:20px solid blue;
margin:20px;.
}
code example:
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
#content {
/* Parent Element */
Background: #EEDC82;
margin:20px Auto;
}
p {
/* child element */
height:100px;
border:20px solid blue;
margin:20px;
}
</style>
<body>
<div id= "Content" >
<p> internal Text </p>
</div>
</body>
Detailed Explanation:
According to commonsense calculations, the height of the P element should be 180 pixels, and the height of the external div element is 220 pixels. In fact, the height of the div element is only 180 pixels. Depending on the CSS rules, the missing part has overlapped.
In the actual design, it is not desirable to overlap the upper and lower boundaries, but to adapt the height according to the inner element size, and realize the rationality of the layout.
Workaround: Do not add a comment to the middle of the floating element.
code example:
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
div {
width:100%; /* Full window */
Float:left; /* Floating Layout */
}
</style>
<body>
<div> Text Lines </div>
<div> Text Lines </div>
<div> text lines </div><!---->
<div> Text Lines </div>
</body>
Detailed Explanation:
If you continue to add more comments, you will continue to have more characters, so repeat.
A more bizarre display is displayed when the last line character length is exceeded, and even a script error message is displayed.
How to resolve:
Use filters to define a height for IE6 and lower browsers, forcing relative elements to have layout properties.
*html #box {
/* Positioning hack*/
height:1%;
}
code example:
<!doctype html>
<meta charset= "Utf-8" >
<title></title>
<style tyle= "Text/css" >
#box {
/* Parent Element relative positioning */
position:relative;
}
#absoulte1, #absoulte2, #absoulte3 {
/* Sub-element absolute relative positioning */
Position:aboulte;
width:100px;
height:100px;
Border:solid Red 4px;
}
#absoulte1 {
/* First child element positioning coordinates, located in the upper-left corner of the containing block */
top:0px;
left:0px;
}
#absoulte2 {
/* Second child element positioning coordinates, located in the upper-right corner of the containing block */
top:0px;
right:0px;
}
#absoulte3 {
/* Third child element positioning coordinates, located in the upper-right corner of the containing block */
bottom:0px;
left:0px;
}
</style>
<body>
<br/><br/><br/><br/><br/>
<div id= "box" >
<div id= "Absoulte1" ></div>
<div id= "Absoulte2" ></div>
<div id= "Absoulte3" ></div>
</div>
</body>
Specific details: Embedding absolutely positioned elements in relative positioning elements allows for a flexible layout, but there is a problem parsing in IE6 and in the lower version of the browser.
Workaround: Remove the background color of the parent element, or specify a fixed height and width for the parent element, or you can define the position property as relative for the floating element and the parent element to avoid such problems.
code example:
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
#content {
/* Parent Element Property */
Background: #EEE8AA;/* Defines the background color of the parent element */
}
#left {
/* left Column Layout properties */
float:left;/* Floating Layout */
border:1px solid red;
width:200px;
height:200px;
}
#bottom {
/* Bottom Column Layout properties */
clear:both;/* Defining Clear Properties */
height:50px;
width:100%;
}
</style>
<body>
<div id= "Content" >
<div id= "Left" >
Left column <br/>
Left column <br/>
Left column <br/>
...
</div>
<div id= "Right" >
Right column <br/>
Right column <br/>
Right column <br/>
...
</div>
<div id= "Bottom" > Bottom column </div>
</div>
</body>
Detailed Explanation:
Problem Description: This bug exists in the IE6 version browser. In certain conditions, when a standard layout page is refreshed or re-downloaded, some content disappears and is not displayed until it is refreshed or checked again.
The problem is that they are hidden behind the background of the parent element, because the floating element is mixed with the flow element layout, and the subsequent element is set to the clear property.
If the background color of the parent element is set, the contents of the flow element may be hidden under the parent element when the page is loaded and invisible.
Workaround: In the right child element, define the clear property to correct. Such as:
#right {
Background:blue;
clear:right;/* Clear Right float */
}
code example:
When two sub-elements with a side-by-side float have a width of 50%, there is sometimes a wrong line in IE quirks mode.
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
#content {width:403px;/* Odd width */}/* Defines the width of the parent element */
#left, #right {
/* Floating child element */
Float:left;
width:50%; /* Each half width */
height:100px;
}
#left {background:red;} /* Left child element attribute */
#right {background:blue;} /* Right child element attribute */
</style>
<body>
<div id= "Content" >
<div id= "left" ></div>
<div id= "right" ></div>
</div>
</body>
Detailed Explanation:
This bug exists in the IE quirks mode. Pixel values are not numeric, but when you use percentages to set units in a layout, there is a decimal fraction of the calculated pixel values.
For small numeric problems, different types of browser-choice methods, ie quirks mode will be calculated according to rounding method.
Standard browsers generally take a negligible approach to small values, and the multiple values are allocated in the order of the elements.
For example:
Contains a box width of 11 pixels, split 3 sub-elements, each sub-element is divided by 3 pixels, the extra 2 pixels in order to the first and second sub-pixel;
If the containing box is 10 pixels wide, each child element is divided equally into pixels, and the extra 1 pixels are given to the first child element.
Workaround: Add 15 pixels of left padding to the parent element of the list before it can be displayed, and a left padding of 16 pixels is required in ie5.x and lower versions.
Such as:
#right {
/*[Item Symbol Hidden hack]*/
width:400px;
Float:left;
Border:solid 1px Blue;
padding-left:16px; /* for ie5.x and Lower * *
padding-left:15px; /* for IE6 version */
}
code example:
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
#left {
/* Left floating Item */
width:100px;
height:100px;
Float:left;
Border:solid 1px read;
}
#right {
/* Right Floating Item */
width:400px;
Float:left;
Border:solid 1px Blue;
}
UL {
/* Clear list items indent */
margin:0;
padding:0;
}
</style>
<body>
<div id= "left" ></div>
<div id= "Right" >
<ul>
<li> list Item 1</li>
<li> list Item 2</li>
<li> list Item 3</li>
</ul>
</div>
</body>
Detailed Explanation:
This bug exists in IE quirks mode, and when the list indentation is cleared, it is suddenly found that the list item symbol is missing in IE.
Because the left edge of the list is the left side of the list item content, not the list item symbol, the actual position of the list item symbol is negative when the filter for the list is set to 0 o'clock.
Standard browsers generally do not parse negative filters, but ignore negative values, but IE will hide negative list items.
Workaround:
If you have set the width and height and are not aware of how much content is actually larger than the value set. This is a good situation.
Just understand the exact size of the content and reset the appropriate size for the parent element.
If the containing zone is dynamic and cannot be statically determined, you can use the Min-height property to fix the overflow behavior.
For example:
/*[IE7 Box Model overflow compatible solution]*/
#box {
/* Parent Element Layout Properties */
width:100px;
_height:100px;/* filter, available in IE6 and lower versions */
min-height:100px;/* limits the minimum height for use in modern standard browsers */
Border:double Red 2px;
}
#sub_content {
/* child element layout Properties */
width:200px;
height:200px;
margin-top:50px;
margin-left:50px;
Border:thin dashed blue;
}
To ensure that this behavior does not change in the lower version of IE, it is recommended to use conditional annotations to design compatible style sheets for different versions of IE. method is to create a new style sheet file for IE6 and earlier versions.
/*[style sheet file for use with IE6 and lower browsers]*/
#box {height:100px;}
Then, using the IE conditional statement to import the stylesheet file, this is a simple, maintainable way to isolate the behavior in older versions of IE from the more standard behavior in IE7.
If you do not set a width and height for the parent element, you should define overflow:visible for the parent element, and the area in the layout should appear as normal in IE6.
code example:
<!doctype html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
#box {
/* Parent Element Layout Properties */
width:100px;
height:100px;
Border:double Red 2px;
}
#sub_content {
/* child element layout Properties */
width:200px;
height:200px;
marign-top:50px;
margin-left:50px;
Border:thin dashed blue;
}
</style>
<body>
<div id= "Sub_content" > Content </div>
</body>
Detailed Explanation:
Overflow is a method. Used to describe whether the content of a block element is omitted when it is outside the parent element. The default is visible and may appear outside of the parent element.
IE7 Previous versions do not support this approach, and parent elements will always automatically resize themselves to accommodate child elements beyond their own scope.
Related cases of CSS compatibility processing
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
