1 пиксель между IE11 и IE8

Вот пример кода:1 пиксель между IE11 и IE8

<html> 
<head> 
    <title> IE11 </title> 
    <style> 
    *{ 
     margin: 0; 
     padding: 0; 
    } 
    table{ 
     table-layout: fixed; 
     border-collapse: collapse; 
     border-left: 1px solid black; 
     border-right: 1px solid black; 
    } 
    td{ 
     text-align: center; 
     border-bottom: 1px solid black; 
     border-right: 1px solid black; 
     padding: 0 0 0 0; 
     overflow: hidden; 
    } 
    </style> 
</head> 

<body> 
    <table width="400px"> 
    <tr> 
     <td> 
      <table width="400px"> 
       <tr> 
        <td style="width:100px"> 
         col1 
        </td> 
        <td style="width:100px"> 
         col2 
        </td> 
        <td style="width:100px"> 
         col3 
        </td> 
        <td style="width:100px"> 
         col4 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <table width="400px"> 
       <tr> 
        <td style="width:100px"> 
         col1 
        </td> 
        <td colspan="2" style="width:200px"> 
         col2 col3 
        </td> 
        <td style="width:100px"> 
         col4 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

В IE10 и IE11, есть 1 пиксель сдвиг в объединяемых столбцов:

http://i.stack.imgur.com/GSNMK.png

Но когда Я запускаю его в IE6-9 или в IE11 с Edge = 5, он отлично отображает.

http://i.stack.imgur.com/NRhKE.png

Это едва заметно, но когда элементы тд основной таблицы велика, это очень раздражает. Как я могу это исправить?

Заранее спасибо.

источник

2015-04-20 bigpig245

Нет ли DOCTYPE в исходном источнике либо? –

И я не думаю, что есть что-то вроде edge = 5. –

Я пробовал все типы! DOCTYPE, но ничего не происходит! – bigpig245

Это зависит от того, как рассчитывается ширина, включая границы или нет.

Вы можете решить это с помощью коробчатой проклейки CSS свойство:

td{ 
    box-sizing: border-box; 
}

источник

2015-04-20 07:43:17 Seb33300

Спасибо, это все, что мне нужно. – bigpig245

Итак, вы можете нажать на кнопку ответа на ответ;) – Seb33300

Извините, но у меня недостаточно репутации, чтобы проголосовать;). Я сделаю это как можно скорее;) – bigpig245

Самое лучшее, что нужно сделать, это 1) добавить правильное объявление DOCTYPE сверху, 2) не использовать режим совместимости, и 3) позволяют ширины границ между ячейками таблицы. Таким образом, это будет 99px для узких ячеек таблицы и 199px для широкого.

<!DOCTYPE html> 
<html> 
<head> 
    <title> IE11 </title> 
    <style> 
    *{ 
     margin: 0; 
     padding: 0; 
    } 
    table{ 
     table-layout: fixed; 
     border-collapse: collapse; 
     border-left: 1px solid black; 
     border-right: 1px solid black; 
    } 
    td{ 
     text-align: center; 
     border-bottom: 1px solid black; 
     border-right: 1px solid black; 
     padding: 0 0 0 0; 
     overflow: hidden; 
    } 
    </style> 
</head> 

<body> 
    <table> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td style="width:99px"> 
         col1 
        </td> 
        <td style="width:99px"> 
         col2 
        </td> 
        <td style="width:99px"> 
         col3 
        </td> 
        <td style="width:99px"> 
         col4 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <table> 
       <tr> 
        <td style="width:99px"> 
         col1 
        </td> 
        <td colspan="2" style="width:199px"> 
         col2 col3 
        </td> 
        <td style="width:99px"> 
         col4 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

Это будет вести себя одинаково не только во всех версиях IE, но и во всех других браузерах.

источник

2015-04-20 07:48:42

В чем проблема с использованием одной таблицы?

HTML

<table width="400px"> 
    <tr> 
     <td style="width:100px">col1</td> 
     <td style="width:100px">col2</td> 
     <td style="width:100px">col3</td> 
     <td style="width:100px">col4</td> 
    </tr> 
    <tr> 
     <td style="width:100px">col1</td> 
     <td colspan="2" style="width:200px">col2 col3</td> 
     <td style="width:100px">col4</td> 
    </tr> 
</table>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
table { 
    border-collapse: collapse; 
} 
td { 
    text-align: center; 
    border: 1px solid black; 
    padding: 0 0 0 0; 
    overflow: hidden; 
}

DEMO

источник

2015-04-20 07:54:33 psycotik

Я думаю, «почему вы не можете использовать одну таблицу» должен быть комментарий, а не ответ. –

1 пиксель между IE11 и IE8

ответ

Смежные вопросы