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，然后执行其他操作，例如边框和您想要的任何内容。

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的sytnax。尝试更现代的语法，例如：

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

IE边框和填充不适用于IE 8 + 9

4 个答案: