Question

IE9显示表格，th和td边界与IE8不同。这是什么原因以及可以做些什么呢？从下面的屏幕打印中可以看出，边框似乎在IE9中具有阴影效果，这使得它们不再像在IE8中那样清晰。这似乎适用于solid（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结果

IE8 result

IE9结果

IE9 result

Answer 1

pt单位是物理单位（1/72英寸）。较新版本的IE可能会在给定要渲染的内容时使用子像素渲染，而这些渲染不具有整数像素。

无论如何，屏幕上的物理单元服务很差（因为浏览器通常对屏幕的DPI做出不好的假设），所以应该为打印介质保留。

改为使用px。

Answer 2

IE9不会将您的1pt边框向下舍入为1px。这不是一个错误，它是一个功能！

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

表边界差异IE9和IE8

2 个答案: