IE и Chrome inline-block css отличаются поведением

0

У меня есть код, где #page_field является родительским и имеет двух детей. Итак, я хочу, чтобы эти два блока шли один за другим. То, что я столкнулся в том, что хром дисплей left_block правильно: pager_separator_design является 30px широкий, так 30px + 120px (относительно слева) дает мне 150px и это то, что должно быть сделано. Однако IE, не добавляйте width pager_separator_design так что общее количество оставленных 120 неверно. Firefox действительно нравится Chrome. Что я могу сделать?
HTML

<div id="page_field"> 
    <div id="pager_separator_design"> 
    </div> 
    <div id="left_block">
    </div> 
</div>

CSS

#page_field
{
    margin-right: auto;
    margin-left:0px;
    width: 1000px;
    background-color: #FFFFFF;
    height:auto;
    display: table;
}

#pager_separator_design
{
    position:relative;
    display: inline-block;
    left: 120px;
    background-image: url('separator_new.png'); 
    width:30px;
    height: 100%;
    z-index:10;
}
#left_block
{   
    vertical-align: top; 
    position:relative;
    left:120px;
    display: inline-block;
    width:850px;
    margin:0;
    padding:0;
}

Я использую IE10.

  • 0
    Всякий раз, когда вы публикуете вопрос, основанный на IE, сообщите, какая это версия, а также укажите HTML-код или, возможно, jsfiddle.net .
  • 0
    Хороший совет. Версия 10. <div id = "page_field"> <div id = "pager_separator_design"> </ div> <div id = "left_block"> </ div> </ div>
Показать ещё 1 комментарий
Теги:
internet-explorer
google-chrome
cross-browser

2 ответа

0

Надеюсь, сегодня я нашел решение и проблему: я использовал таблицу, таблицу-строку и таблицу-ячейку. + добавлена дополнительная ячейка emply слева. И проблема заключалась в том, что я создал сайты IE, такие как IE 7. Я сделал это много недель назад и забыл об этом. Мой css:

 #page_field
{
    margin: 0px;
    padding:0px;
    margin-left:0px;
    width: 1000px;
    background-color: #FFFFFF;
    display: table;
    position:relative;
}
#middle
{
    display:table-row;
}
#left_block
{
    width:120px;
    display: table-cell;
    margin:0;
    padding:0;
}
#pager_separator_design
{
    position:relative;
    display: table-cell;
    background-image: url('separator_new.png'); 
    background-repeat:repeat-y;
    width:30px;
    height: 100%;
    z-index:10;
    margin:0;
    padding:0;
}
#right_block
{   
    vertical-align: top; 
    position:relative;
    display: table-cell;
    width:850px;
    margin:0;
    padding:0;
}

И код:

<div id="page_field">
    <div class="middle">
        <div id="left_block">
        </div>
        <div id="pager_separator_design">
        </div>
        <div id="right_block">
        </div>
    </div>
</div>

Надеюсь, это поможет кому-то.

Поделиться
0

Отображение встроенного блока имеет маржу при попытке выравнивания элементов по горизонтали. Я думаю, что это около 6 пикселей, чего не должно быть (обычно в IE).

Попробуйте добавить margin: 0 0 0 -6px к вашим элементам, чтобы узнать, разрешает ли это проблема.

Caveat: Не уверен, что я полностью понял проблему, так что это немного догадка.

Поделиться
  • 0
    Нет, это не работает. Я добавляю <! - [if IE]> <link rel = "stylesheet" type = "text / css" href = "theme-ie.css"> <! [Endif] ->, и это частично решает проблему проблема, но у вас есть другое хорошее решение?
  • 0
    Мне нужно увидеть больше кода, это всего лишь догадка. Положите пример на jsfiddle.net
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню