表格边框区别 IE9 vs IE8

Posted 2023-03-05

技术标签:

【中文标题】表格边框区别 IE9 vs IE8【英文标题】：Table border difference IE9 vs IE8 【发布时间】：2012-06-05 12:30:53 【问题描述】：

IE9 显示 table、th 和 td 的边框与 IE8 不同。这是什么原因，可以采取什么措施？从下面的屏幕打印中可以看出，边框在 IE9 中似乎具有阴影效果，这导致它们不再像在 IE8 中那样清晰。这似乎适用于实心 (table, th) 以及虚线 (td) 边框。

使用的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 结果

IE9 结果

【问题讨论】：

我猜这是改进的子像素渲染，因为您没有使用整数像素作为边框大小。不要将pt 单位用于屏幕媒体。尝试并成功 - 将您的评论提升为答案，我会接受。 【参考方案1】：

IE9 不会将 1pt 边框向下舍入为 1px。这不是错误，而是功能！

要解决这个问题，您可以使用 px 而不是 pt，并确保使用整数。

【讨论】：

【参考方案2】：

pt 单位是物理单位（1/72 英寸）。较新版本的 IE 可能会使用亚像素渲染来渲染没有整数像素的东西。

无论如何，物理单位在屏幕上的表现不佳（因为浏览器通常对屏幕的 DPI 做出错误的假设），因此应保留给印刷媒体。

请改用px。

【讨论】：