When the child element is floating and has the same margin as the floating direction in ie6 layout, the first child element, that is, the element adjacent to the parent element, will generate a double margin value in this direction. As follows:
<Style type = "text/css"> * {margin: 0; padding: 0;} li {list-style: none;} ul {overflow: hidden; zoom: 1; background: green;} li {width: 98px; height: 198px; background: red; border: #000 1px solid; margin-right: 20px; float: right ;} </style> <body> <ul> <li> </li> <li> </li> </ul> </body>
Solution: Add a style for the child element {display: inline ;}
◆ Note:
This problem occurs only when the floating attribute is set for block-level objects. This problem does not occur for inline objects (Row-level objects. In addition, only the left and right margin values are set to cause problems, and the top and bottom margins are not affected. The display: inline method is only used when float is used. Otherwise, problems may occur during display. When float is used for multiple child blocks in the parent block, only the display: inline
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
