Разница границ таблицы IE9 против IE8

IE9 отображает таблицу, th и td границы, отличные от IE8. В чем причина этого и что можно сделать по этому поводу?
Как видно из рисунков ниже, границы, по-видимому, имеют затененный эффект в IE9, который заставляет их быть не такими четкими, как в IE8. Это, по-видимому, относится к сплошным (таблица, th), а также к пунктирным (td) границам.Разница границ таблицы IE9 против IE8

HTML используется

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>table border test</title> 
     <style type="text/css"> 
table { 
    border: solid black 1pt; 
    border-collapse: collapse; 
    padding: 0; 
    border-spacing: 0; 
} 

th { 
    background: rgb(255, 255, 153); 
    border-style: solid; 
    border-color: black; 
    border-width: 1pt; 
    padding: 0cm 5pt; 
    color: black; 
    font-family: Verdana; 
    font-size: 10pt; 
    font-style: normal; 
    vertical-align: top; 
} 

td { 
    border-style: dotted dotted none none; 
    border-color: black; 
    border-width: 1pt; 
    padding: 0cm 5pt; 
    color: black; 
    font-style: normal; 
    font-family: Verdana; 
    font-size: 10pt; 
    vertical-align: top; 
    margin-bottom: 4.5pt; 
    margin-top: 0pt; 
} 

    </style> 
     </head> 
    <body> 
     <br> 

     <table> 
     <thead> 
      <tr> 
       <th class="small">col A</th> 
       <th class="small">col B</th> 
       <th class="large">col C</th> 
       <th class="medium">col D</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="center">A1</td> 
       <td align="center">B1</td> 
       <td>C1</td> 
       <td>D1</td> 
      </tr> 
      <tr> 
       <td align="center">A2</td> 
       <td align="center">B2</td> 
       <td>C2</td> 
       <td>D2</td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

IE8 результат

IE8 result

IE9 результата

IE9 result

источник

2012-05-31 Maestro13

Я предполагаю, что улучшен субпиксельный рендеринг, вызванный тем, что вы не используете целое число пикселей для размера границы. Не используйте блоки 'pt' для экранных носителей. – Quentin

Пробовал и преуспел - продвигайте свой комментарий к ответу, и я его приму. – Maestro13

Блок pt является физическим устройством (1/72 дюйма). Более новые версии IE, вероятно, используют субпиксельный рендеринг, когда ему дают что-то для рендеринга, у которого нет целого числа пикселей.

Физические устройства плохо обслуживаются на экране в любом случае (поскольку браузеры часто делают неудовлетворительные предположения о DPI на экране), поэтому их следует резервировать для печатных носителей.

Используйте вместо этого px.

источник

2012-05-31 09:10:56 Quentin

IE9 не округлить свой 1pt границу в 1px. Это не ошибка, это особенность!

Для этого вы можете использовать px вместо pt и не забудьте использовать целые числа.

источник

2012-05-31 09:07:49 Willem

Разница границ таблицы IE9 против IE8

ответ

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