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 。

谁能解释为什么会这样？

这是带有呈现的HTML的jsfiddle 。

更新

我感谢所有的评论和建议，我将研究如何修正我的标记...

另一个更新

你们都是正确的！ 我的罪魁祸首是这里的罪魁祸首。 非常感谢大家的投入！

Answer 1

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

表格行中不能有填充。 相反，您需要在td添加填充样式。

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

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

并且只需确保将td放入tr然后执行其余操作，例如border和任何您想要的内容。

Answer 2

• 几个css属性（其中的padding和border在应用于tr元素时无效

• 您将h3直接嵌套在tr之下，这是无效的HTML。 tr元素只能直接包含th或td 。

Answer 3

IE 8+使用CSS样式：边框，填充和显示，可能是HTML结构中的问题。

Answer 4

我首先想到的是您的HTML标记错误。 它是

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

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

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