First to two pieces of code, a paragraph is HTML code, a section of CSS code, the following analysis is based on these two pieces of code.
HTML code:
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title> solve the problem of alignment error at the bottom of IE6 background map </title> <body> <div class= "DivA" > <div class= "DIVB" ></div> </div> </body> |
|
CSS code:
| The code is as follows | Copy Code |
| . diva{ width:300px; height:300px; Overflow:hidden; border:1px solid #cccccc; Background:url ("/201203311028034288.jpg") no-repeat 0% 100%; } . divb{ width:50px; Background-color: #6666ff; margin:0 Auto; } |
|
Example Two
| The code is as follows | Copy Code |
<style type= "Text/css" > |
|
Solutions
| code is as follows | copy code |
| <style Type= "Text/css" </div> |
|
View Map:
After the code is ready, we start to analyze what hides the background to find out!
In the first step , when we set the height of the DIVB to 300px, it is the same height as the parent element, and the display is normal:
IE6 display effect, normal
other browser display effect, normal
The second step , I will try to set the height of the DIVB to 999px to see what effect:
IE6 display effect, background image disappears
Other browsers display effects, normal
The problem is, when the DIVB is 999px, the background image is gone! Let's find out the background map together.
In the third step , we set the height of the DIVB to 350px look:
IE6 display effect, when the background image is only partially hidden
Other browsers display effects, normal
As you can see from the above diagram, when the child element is higher than the parent element, the background of the parent element is IE6, the background of the parent element is moved down, and the pixel of the child is higher than the parent element.
Solution:
Because the height of the parent element is fixed when you set it beyond the height, so we can set the height of the background-positiony= parent element-the height of the background image. But the disadvantage is that when the background picture or the parent element's height changes, the Background-positiony value will be recalculated.
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
