Span не совпадает с h1 в ie6 - PullRequest
Новая
       11

Span не совпадает с h1 в ie6

0 голосов
/ 21 января 2010

У меня внутри div, один тег h1, за которым следует тег span, который расположен один рядом с другим, но span плавает вправо. Он работает в Firefox, Chrome и Internet Explorer 7 и 8, но не в ie6. В ie6 тег h1 больше ни с того ни с сего, поэтому тег span остается ниже его.

Вот код: 

     <div style="width: 740px; float:left">

        <div id="article-header">

            <h1><span>Text</span></h1>

            <span class="breadcrumb">Link1 > Link2</span>

        </div>

Css: 

  #article-header h1
  {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #F2612F;
     text-transform: uppercase;
     display: inline;
     position: relative;
  }
  .breadcrumb
  {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 9px;
    float: right;
    text-transform: uppercase;
    vertical-align: baseline;
    margin-top: 0px; 

    text-align: right;
    display: inline;
  }

Ответы [ 2 ]

0 голосов
/ 21 января 2010

Не используйте float:left на H1, просто используйте display:inline

Если вам действительно необходимо использовать float:left по какой-то причине, попробуйте добавить это в таблицу стилей IE6 only : 

#article-header h1{
   display: inline;
}

Это не должно негативно влиять на рендеринг, но в сочетании с плавающей точкой в ​​IE6 эффект отличается от простого display:inline

0 голосов
/ 21 января 2010

Вам может понадобиться Файл сброса CSS , чтобы избавиться от случайных, предопределенных стилей в IE6. Это исключает все виды стелс-стилей, которые меняются от одного браузера к другому.

...