html - css float 在 IE 7 或 8 中不起作用

Question

此代码在 firefox 和 chrome 中显示 3 列。 但是，当您在 Internet Explore 7 或 Internet Explorer 8 中加载页面时，它会垂直显示每个元素。

非常感谢您的提前帮助!

> <style> /* THREE COLUMNS */
> 
> ul.three-col {   overflow: hidden; }
> 
> ul.three-col le {   float: left;   width: 30%;   margin-right: 5%;  
> margin-bottom: 15px;   /* .edge below makes up for the overage */ }
> 
> ul.three-col le img {   margin-left: -2px;   margin-bottom: 7.5px; }
> 
> ul.three-col le.edge {   margin-right: 0; }
> 
> 
> </style>
> 
> 
> 
> 
> <ul class="three-col">
>     <le>
>       <img src="http://example.com/images/bottom/optimization.png">
>       <h4>Web Page Optimization</h4>
>       <p>another text block</p>
>      </le>
>     <le>
>       <img src="http://example.com/images/bottom/lower_costs.png">
>       <h4>Lower Costs</h4>
>       <p>another text block</p>
>     </le>
>     <le class="edge">
>       <img src="http://example.com/images/bottom/passionate.png">
>       <h4>Passionate Support</h4>
>       <p> another text block</p>
>     </le>
>     <le>
>       <img src="http://example.com/images/bottom/expert2.png">
>       <h4>Top Advertising Experts</h4>
>       <p>another text blockt</p>
>     </le>
>     <le>
>       <img src="http://example.com/images/bottom/constant_contact.png">
>       <h4>Constant Contact</h4>
>       <p>another text block</p>
>     </le>
>     <le class="edge">
>       <img src="http://example.com/images/bottom/targeted.png">
>       <h4>Targeted Traffic</h4>
>       <p> another text block</p>
>     </le>   </ul></div>

Answer 1

这<le> HTML 中不存在标记。
您要么从错误的资源中获取它，要么只是编造它，但您不能这样使用它。

浏览器可以使用虚构的标签为所欲为，包括完全忽略其 CSS 规则。

也许你的意思是<li> (“我列表我”)。