1

假设我有一个ul li 结构，我想删除最后一个 li 边框，该边框也支持IE 6，仅使用 CSS（在我的项目中仅使用 css 是强制性的）。

<ul>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
</ul>'

我想要一种在 IE6 中也可以使用的输出类型... 在此处输入图像描述

4

4 回答 4

1

由于支持 IE6 是一项要求，如果您不想使用 Javascript 或添加类（首选方法），您将不得不变得有点笨拙。

目前尚不清楚您要寻找什么外观，但这是一种保留子弹的方法。这假设边界已定义并且您想要隐藏一个。您可以overflow: hidden在<ul>和margin-bottom: -1px上设置<li>。这在 IE6 中工作得很好。

演示： jsFiddle

输出：

输出

CSS：

li {
    border: 1px solid black;
    margin-bottom: -1px;
}

ul {
    overflow: hidden;
}
​​

HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>

这是另一种方法，您只是不定义底部边框。

演示： jsFiddle

CSS：

li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>
于 2012-12-02T08:13:43.107 回答
0

您可以通过将类添加到最后一个 li 来做到这一点，因为它不支持last-selector并且没有其他方法+

另一个可能不是纯 css 但我认为它会有所帮助的选项是 jQuery 你可以使用 jQuery，因为 jQuery 支持last-child

尝试

$(function(){
   $("ul li:last-child").css("border","none")
})

它将支持几乎所有的浏览器

除了有特殊要求外，考虑 ie6 也不是好主意。而是 facebook 和许多大网站不考虑 ie6 检查浏览器统计 ie6 甚至不持有.5%所以我建议不要考虑 ie6

在此处输入图像描述

于 2012-12-02T08:10:16.103 回答
0

下面是解决方案（在 IE9 的 quirks 模式下测试过，相当于 IE6，但让我知道结果，我坚信它应该可以工作）：

<html>
<head>
  <style>
    ul li{
        border:1px solid red;
    }
    ul li.lastchild{
        border-bottom: 0px; // Or use "border: 0px;" if you completely 
                            // want to remove the border
    }
  </style>
</head>
<body>
    <ul>
        <li>HI</li>
        <li>HI</li>
        <li>HI</li>
        <li class="lastchild">HI</li>
    </ul>
</body>
</html>
于 2012-12-02T08:51:14.867 回答
-2

经过长时间的研究，我得到的结果是 CSS 中没有一个方法可以删除最后一个 li 边框，这也适用于 IE6 ......所以你必须在最后一个 li 元素上添加一个类，或者你使用 jquery 来删除最后一个 li 边框.......

结果：- 仅使用 CSS 无法实现此目标.......

于 2012-12-02T17:40:18.080 回答