CSS border and padding not working in IE 8 + 9

问题

I have the following DOM and 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*/
}

In IE8 + 9, several of my CSS rules are not working.

border, padding and display.

Can anyone explain why this might be?

Here's a jsfiddle with the rendered HTML.

UPDATE

I appreciate all of the comments and suggestions, I'm going to look into fixing my mark up...

ANOTHER UPDATE

You were all correct! My horrendous mark up was the culprit here. Everyone's input was much appreciated!

回答1:

This is not only IE 8+ issue but it won't work in any browser.

You can't have padding in table rows. Instead you need to add the padding styles in your td.

And I can't see that you're appending any td in your code so I could modify that.

Thus, ensure to put padding styles in your td instead of tr.

And just be ensure to put td in your tr and do the rest things like border and anything you want on it.

回答2:

• Several css properties, padding and border among them, are invalid when applied to tr elements

• You are nesting an h3 directly under a tr, which is invalid HTML. tr elements may only directly contain th or td.

回答3:

IE 8+ use css style: border, padding and display, likely problem in you html structure.

回答4:

My first thought is that you have the HTML tags wrong. It is

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

The second is the sytnax of the jQuery you are using. Try the more modern syntax, such as:

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

来源：https://stackoverflow.com/questions/28431007/css-border-and-padding-not-working-in-ie-8-9