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