CSS 边框和填充在 IE 8 + 9 中不起作用

Question

我有以下 DOM 和 CSS:

var tableRow = jQuery(
    jQuery('<tr/>')
        .addClass('tr_class')
        .append(
            jQuery('<h3/>')
                .text('Title')
                .addClass('first_class second_class')
        )
).appendTo(table);


.tr_class{
    padding: 0px 0px 2px 5px;          /*not working*/
    display: block;                    /*not working*/
}


h3.first_class {
    font-weight: bold;                /*working*/
}


h3.second_class {
    border-bottom: 1px solid #5f7836; /*not working*/
    padding: 3px;                     /*not working*/
    display: block;                   /*not working*/
    font-size: 11px;                  /*working*/
}

在 IE8 + 9 中，我的几个 CSS 规则不起作用。

border、padding 和 display。

谁能解释为什么会这样？

这是 jsfiddle 渲染的 HTML。

更新

感谢所有的评论和建议，我会考虑修复我的标记...

另一个更新

你们都说对了！我可怕的标记是这里的罪魁祸首。非常感谢大家的意见！

Answer 1

这不仅是 IE 8+ 的问题，而且在任何浏览器中都不起作用。

您不能在 table 行中填充。相反，您需要在 td.

中添加填充样式

而且我看不到您在代码中附加任何 td，因此我可以对其进行修改。

因此，请确保将填充样式放入 td 而不是 tr。

并确保将 td 放入您的 tr 中，然后进行其余操作，例如边框和您想要的任何内容。

Answer 2

几个css属性，其中padding和border，应用于tr元素时无效
您将 h3 直接嵌套在 tr 下，这是无效的 HTML。 tr 元素只能直接包含 th 或 td.

Answer 3

我的第一个想法是你的 HTML 标签错了。这是

<tr> and <h3> for starting a tag, and </tr> and </h3> for closing/ending a tag.

第二个是您正在使用的 jQuery 的语法。尝试更现代的语法，例如：

$('tr') instead of JQuery('<tr>').

Answer 4

IE 8+ 使用 css 样式：边框、填充和显示，您的 html 结构可能存在问题。

CSS 边框和填充在 IE 8 + 9 中不起作用

CSS border and padding not working in IE 8 + 9

html

css

jquery

internet-explorer-8