Почему статически расположенные дочерние элементы элемента с фиксированной позицией набирают ширину? - PullRequest
Новая
       5

Почему статически расположенные дочерние элементы элемента с фиксированной позицией набирают ширину?

0 голосов
/ 24 октября 2010

ОБНОВЛЕНИЕ:

Кажется, это проблема только с ul / li, если я заменил ul на div и удалил liи примените соответствующий стиль к a вместо его штрафа.ID 'все еще хотелось бы знать, почему структура ul / li представляет проблему, поскольку поля / отступы были сброшены явно.

У меня возникли проблемы с дочерними элементами элемента фиксированной позиции вIE7.Кажется, они откуда-то набирают ширину / запас / отступ, но я не могу понять, где или как это исправить.

Вы можете посмотреть на это в jsFiddle здесь .Я добавил цвета bg только для отладки.Теги image / li должны быть вровень с желтым цветом, они есть в IE8, а также в mozilla и webkit.Но в IE7 есть дополнительные ~ 20px пространства слева, толкающие их, как будто теги li, a или img имеют запас.Тем не менее, если я просматриваю свойства в IEDevToolbar, не применяются поля или отступы.Более того, это происходит, даже если я назначаю ширину всем и обнуляю поля / отступы непосредственно для каждого элемента с помощью IEDevToolbar.

Я полностью потерялся в этом.

Ниже приведен соответствующий код... На рассматриваемом макете существует переходный тип документа XHTML 1.0: 

<style type="text/css">
 .social-widgets {
    position: fixed;
    top: 125px;
    left: 0px;
    background: #f00;
    width: 34px;
  }
  .social-widgets-content {
    list-style: none inside none;
    margin: 0;
    padding: 0;
    text-align: left;
    background: #ff0;
  }
  .social-widgets-content li {
    margin: 10px 0 !important;
    padding:0; 
    width: 34px;
    background: #0f0;
  }
  .social-widgets-content img {
    display:block;
    border-top: 2px solid #e9e8e8;
    border-bottom: 2px solid #e9e8e8;
    border-right: 2px solid #e9e8e8;
    padding: 0px; margin:0px;
    background: #00f;
  }
</style>

<div class="social-widgets">
  <ul class="social-widgets-content">
    <li><a href="#"><img src="/images/button/button.facebook.png"></a></li>
    <li><a href="#"><img src="/images/button/button.twitter.png"></a></li>
    <li><a href="#"><img src="/images/button/button.feedback.png"></a></li>
  </ul>
</div> <!-- /.social-widgets -->

1 Ответ

2 голосов
/ 25 октября 2010

Это не имеет ничего общего с position:fixed;. Это была проблема со стилем списка. При использовании list-style: none inside none; IE7 все еще добавляет интервал для маркера списка, несмотря на то, что маркер установлен на none. Решением было установить list-style-type: none; вместо использования сокращения.

...