使用带有顶部和底部边框的CSS格式化表格

Question

  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <title></title>
    <style type="text/css">
   li {
      display:inline;
      list-style-type:none; 
      padding-left:1em;
      margin-left:1em;
      border-left:1px solid #ccc;
      }
   li:first-child {
     border-left:none
   }


  </style>
 </head>
 <body>

<table  cellspacing="0px;" style="border-top-width:0.1px; 
 border-top-style:solid;border-top-color:#ccc; border-bottom-color:#ccc; 
  border-bottom-style:solid; border-bottom-width:0.1px;">
 <tr>
    <td>
          <ul>
           <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
             <li><a href="#">Item four</a></li>
          </ul>
    </td>
    </tr>
</table>
</body>

当我在谷歌浏览器中运行代码时，在IE浏览器中不显示顶部和底部边框。 我还想增加li标签之间的行分隔符高度我遵循正确的方法。任何人都可以提供帮助

Answer 1

将0.1px更改为1px一个像素是最小的屏幕单位，你不能显示.5或.1的像素:)在IE中显示边框，因为它最多可以转换为1px而其他浏览器将其降低到0px

Answer 2

采用

border-top-width:1px;

并不是

border-top-width:0.1px;

您的测量值是像素，但您的语法就像使用em一样。

此问题在您的cellspacing标记中也很明显。

Answer 3

像素是视觉显示的最小单位。 没有0.1px;这样的东西0.1px; 。 虽然这可能在某些情况下有效，但它完全不标准，所以不要依赖它。

Answer 4

不允许使用px（像素）度量单位的十进制值。 您不能将0.1值用于px。

如果你想要达到比像素更小的宽度（我坚决不鼓励练习），使用测量单位em

为了理解不同的行为，我建议回复： CSS宽度中的小数位是否受到尊重？

在这里你可以找到一些不错的测试。

使用带有顶部和底部边框的CSS格式化表格

问题描述

4 个解决方案

解决方案1
1 2012-02-09 15:46:17

解决方案2
1 已采纳 2012-02-09 15:46:55

解决方案3
0 2012-02-09 15:45:35

解决方案4
0 2012-02-09 15:47:55

使用带有顶部和底部边框的CSS格式化表格

问题描述

4 个解决方案

解决方案1 1 2012-02-09 15:46:17

解决方案2 1 已采纳 2012-02-09 15:46:55

解决方案3 0 2012-02-09 15:45:35

解决方案4 0 2012-02-09 15:47:55

解决方案1
1 2012-02-09 15:46:17

解决方案2
1 已采纳 2012-02-09 15:46:55

解决方案3
0 2012-02-09 15:45:35

解决方案4
0 2012-02-09 15:47:55