Положение моих кругов <li>отличается между IE и Firefox - PullRequest
Новая
       28

Положение моих кругов <li>отличается между IE и Firefox

0 голосов
/ 04 июня 2011

Это продолжение моего последнего вопроса.Благодаря "му слишком коротка" я теперь могу продемонстрировать свою проблему на скрипке.

У меня есть следующий код.

Я хочу, чтобы код показывал круги списка слева от текста, но справа от .img DIV.Это работает в Firefox и в Opera, но в IE они расположены очень далеко слева.Я не могу понять, почему они расположены по-разному в двух браузерах.Помощь будет высоко ценится. 

<div class="fp1">
    <div class="col">
      <div class="img" id="img1"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>        
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>

.fp1 .row   { overflow: hidden;  }
.fp1 .img   { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
    background: yellow; no-repeat scroll 0 0 transparent; }

.fp1 .col   { float: left; width:50%; margin:0px; }
.fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li   { line-height:15px; }

Вот это скрипка

Ответы [ 3 ]

2 голосов
/ 04 июня 2011

Демо 1

Я сделал пару вещей, основываясь на своем опыте.Наиболее важно:

  1. Я переместил UL влево
  2. Я обнулел все поля / отступы на UL (кроме отступов влево, чтобы пуля оставалась там))
  3. Я обнулел все поля / отступы на LI

Обратите внимание, что разные браузеры имеют разные значения по умолчанию для полей / отступов на UL и LI, поэтомунормализация.

Демонстрация 2

Это почти то же самое, что и выше, за исключением того, что UL не является плавающим, вместо этого используется левое поле.

1 голос
/ 04 июня 2011

Мой CSS не очень хорош, но я думаю, что вам нужно что-то вроде этого: 

.fp1 .col ul      { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
1 голос
/ 04 июня 2011

Я не могу объяснить, почему IE делает подобные глупости, за исключением того, что IE делает такие вещи постоянно!

Решение - условные комментарии.

Они позволяют указывать разные CSS только в версиях IE: http://www.quirksmode.org/css/condcom.html

так 

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

Будет предназначаться для всех версий IE, так же, как 

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Будет предназначаться только для IE6.

так что это должно исправить вашу проблему 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style><!-- 
    .fp1 .row           { overflow: hidden;  }
    .fp1 .img           { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
    .fp1 .col           { float: left; width:50%; margin:0px; }
    .fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
    .fp1 .col ul span { color:#222; font-size: 0.85em; }
    .fp1 .col ul li   { line-height:15px; }
    --></style>
<!--[if IE]>
<style><!-- 

ul li {
    margin-left: 80px;
    color: red;
}

--></style>
<![endif]-->
</head>

<body>
<div class="fp1">
    <div class="col">
      <div class="img" id="img1"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>        
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>


</body>
</html>
...