IE 7 中缺少左边框答案

【问题标题】：Missing Left-Border in IE 7IE 7 中缺少左边框
【发布时间】：2011-01-04 20:55:59
【问题描述】：

对于这个用 HTML 和 CSS 创建的报告，左边框在 IE 7 和 6 中消失了。它们在 IE 8、Firefox、Chrome、Opera 等中正确显示。

我正在使用三个不同的 CSS 类应用样式：

.LeftBorder
{
    border-left: 1px solid black;
}
.LeftBorderHeadingShaded
{
    background-color: gray;
    color: black;
    text-align: left;
    font-weight: bold;
    border-top: 2px solid black;
    border-left: 1px solid black;
}
.noshadeLeftBorder
{
    background-color: white;
    border-left: 1px solid black;
}

这些类应用于特定的 TR 和 TD 标签，但左边框无法显示在其中任何一个上。缺少一些底部边框，但这没什么大不了的。

我制作了一个并排显示 IE 7、6 和 8 的屏幕截图。我圈出了问题区域。这是full HTML/CSS。

_{（来源：mckeeth.org）}

【问题讨论】：

请记住，IE6 在同一元素上存在多个类时会出现问题。这似乎不是您问题的原因，因为它在 IE 7 中也不起作用，但仍然如此。
我只为每个元素应用一个类。不同的元素只是有不同的类。
为了澄清 Pekka 所说的它的 not 元素具有多个类（如 <div class="class-one class-two class-three"></div>）是在 css 中使用多个类选择器（如 div.class-one.class-two {/* properties */}）的问题。此选择器应正确评估（在 FF、Safari 中确实如此）但在 IE 中不起作用。

标签： css internet-explorer internet-explorer-7 border

【解决方案1】：

编辑：

那么，选择器只是意味着“将属性应用于类型为 td 的元素，这些元素是类 LeftBorder 的 tr 元素的子元素”。如果那不适合您的结构，我为您的困惑道歉，我只看了一眼您在 fire bug 中的代码，并看到了一个带有 LeftBorder 类的 tr。底线是尽管您需要将边框应用于td 和/或table...而不是tr。

首先，我认为您不应该将边框应用于tr，它们位于 td 上，因此您需要像tr.LeftBorder td 一样定位它们

【讨论】：

解决方案是将 LeftBorder 样式应用于 TR 中的第一个 TD。当然，其中一些样式也有其他格式，但它会起作用。