Блог

Главная - Вопросы по программированию - css float не работает в IE 7 или 8

css float не работает в IE 7 или 8

#html #css

#HTML #css

Вопрос:

Этот код показывает 3 столбца как в Firefox, так и в Chrome. Однако, когда вы загружаете страницу в Internet Explorer 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>

Комментарии:

1. Я думаю, вы перепутали <le> элемент с реальным <li> элементом. Chrome и Firefox отображают общий элемент, но более старые версии IE не поддерживают ничего, кроме реальных стандартных элементов.

2. Вы собираетесь сообщить нам желаемый результат? И что вы сделали для решения / исследования проблемы?

Ответ №1:

Этот <le> тег не существует в HTML.
Либо вы взяли его с неправильного ресурса, либо просто создали, но вы не можете использовать его таким образом.

Браузеры могут делать все, что захотят, с выдуманными тегами, включая полное игнорирование их правил CSS.

Возможно, вы имели в виду <li> («list item»).

Ответ №2:

прежде всего, вы используете тег <le>, который не является тегом HTML (вы, вероятно, имели в виду <li>)

Вторая проблема, с которой вы сталкиваетесь, заключается в том, что вы присваиваете каждому элементу li ширину 30%, но вы также назначаете запас в 5% справа, что приводит к общему количеству 105%.

Если вы используете следующий css и заменяете <le> на <li>, он должен работать как минимум до IE5

 <style> /* THREE COLUMNS */

 ul.three-col {   overflow: hidden; }

 ul.three-col li {   float: left;   width: 25%;   margin-right: 5%;  
 margin-bottom: 15px;   /* .edge below makes up for the overage */ }

 ul.three-col li img {   margin-left: -2px;   margin-bottom: 7.5px; }

 ul.three-col li.edge {   margin-right: 0; }


</style>

И если вам не нужен стиль списка (появятся маленькие точки слева), вы можете дополнительно использовать

 ul.three-col { list-style-type: none;}