使用带有上下边框的 CSS 设置表格格式


  <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标签之间的行分隔符高度我是否遵循正确的方法。谁能帮忙

使用

border-top-width:1px;

而不是

border-top-width:0.1px;
你的

度量是像素,但你的语法就像你在使用em一样。

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

0.1px更改为1px 一个像素是最小的屏幕单位,您无法显示一个像素的.5.1:)在IE中,显示边框是因为它向上舍入到1px,而其他浏览器将其向下0px

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

不允许使用 px(像素(度量单位的十进制值。不能对 px 使用 0.1 值。

如果你想达到比像素更小的宽度(我坚决不鼓励的做法(,请使用测量单位em

为了理解不同的行为,我建议这个回答:CSS宽度中的小数位是否得到尊重?

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

最新更新