CSS边框和填充不工作在IE 8 + 9 [英] CSS border and padding not working in IE 8 + 9

问题描述

我有以下DOM和CSS：

  var tableRow = jQuery（
 jQuery（'< tr />'）
 .addClass（'tr_class'）
 .append（
 jQuery（'< h3 />'）
 .text b $ b .addClass（'first_class second_class'）
）
）.appendTo（table）; 
 
 
 .tr_class {
 padding：0px 0px 2px 5px; / * not working * / 
 display：block; / *不工作* / 
} 
 
 
 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 。

任何人都可以解释为什么会是这样？

这里是

UPDATE 。

我很感激所有的意见和建议，我会考虑修复我的标记...

其他更新

你们都正确！我的可怕标记是这里的罪魁祸首。

解决方案

这不仅是IE 8以上的问题，但它不会在任何浏览器工作。 / p>

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

我看不到请在您的代码中附加任何 td ，以便我可以修改。

code> td 而不是 tr 。

在 tr 中放置 td ，并执行其他操作，如border和任何你想要的东西。

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!

解决方案

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.

这篇关于CSS边框和填充不工作在IE 8 + 9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！