Jquery 不认识填充物和边框

在页面的右侧有一些选项卡（配色、摄影和伴奏），我用jQuery创建了这些选项卡。然而，我注意到IE（多么令人惊讶）没有识别出

h2

和compartments下的表上的填充和边框

普通的浏览器可以很好地渲染，只是IE造成了问题

有什么想法吗

<div class="tabbedPanels">
 <ul class="tabs">
  <li class="firstlitab"><a href="#panel1" tabindex="1">COLORWAYS</a></li>
  <li><a href="#panel3" tabindex="3">PHOTOGRAPHY</a></li>
  <li class="lastlitab"><a href="#panel2" tabindex="2">COMPANIONS</a></li>
 </ul>
 <div class="panelContainer">
  <div id="panel1" class="panel">
   <p>content here</p>
  </div> <!-- end panel1 -->

  <div id="panel2" class="panel">                           
   <table class="w_table">
    <h2>Wallpaper</h2>
    <tr>
     <td><a href="#"><img src="images/products/companions/wallpaper1.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/wallpaper2.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/wallpaper3.jpg" /></a></td>
    </tr>
   </table>
   <table class="pf_table">
    <h2 class="pfh2">Printed Fabrics</h2>
    <tr>
     <td><a href="#"><img src="images/products/companions/printedfabrics1.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/printedfabrics2.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/printedfabrics3.jpg" /></a></td>
    </tr>
   </table>
   <table class="wf_table">
    <h2 class="wfh2">Woven Fabrics</h2>
    <tr>
     <td><a href="#"><img src="images/products/companions/wovenfabrics1.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/wovenfabrics2.jpg" /></a></td>
     <td><a href="#"><img src="images/products/companions/wovenfabrics3.jpg" /></a></td>
    </tr>
   </table>
  </div> <!-- end panel2 -->
  <div id="panel3" class="panel">
   <p>content here</p>
  </div> <!-- end panel3 -->
 </div> <!-- end panelContainer -->
</div> <!-- end tabbedPanels -->


<script>
$(document).ready(function() {

    $('.tabs a').click(function() {
     // save $(this) in a variable for efficiency
     var $this = $(this);

     // hide panels
     $('.panel').hide();
     $('.tabs a.active').removeClass('active');

     // add active state to new tab
     $this.addClass('active').blur();   
     // retrieve href from link (is id of panel to display)
     var panel = $this.attr('href');
     // show panel
     $(panel).fadeIn(250);

     // don't follow link down page
     return(false);
    }); // end click

    // open first tab
    $('.tabs li:eq(2) a').click();
}); // end ready
</script>

满足于此

墙纸
印花布
织物
满足于此

$（文档）.ready（函数（）{
$（'.tabs a'）。单击（函数（）{
//将$（此）保存在变量中以提高效率
var$this=$（this）；
//隐藏面板
$（'.panel'）.hide（）；
$（'.tabs a.active'）.removeClass（'active'）；
//将活动状态添加到新选项卡
$this.addClass（'active'）.blur（）；
//从链接检索href（是要显示的面板的id）
var panel=$this.attr（'href'）；
//显示面板
美元（面板）.fadeIn（250）；
//不要跟随链接向下的页面
返回（假）；
})；//结束单击
//打开第一个选项卡
$（'.tabs li:eq（2）a'）。单击（）；
}); // 准备就绪

现在看看你的代码，我可能会说，我最初看到的唯一不合适的地方是你的h2标签在td标签之外。这可能会破坏填充物下面的内容。同样，发布表格的css也是有益的，现在看看你的代码，我可能会说，我最初看到的唯一不合适的地方是你的h2标签在td标签之外。这可能会破坏填充物下面的内容。同样，发布表格的css也是有益的

您使用的是什么版本的IE？在IE10上似乎还可以

我看不出有什么不对，所以我只是猜测

要删除边框，请执行以下操作：

border:none;

这可能有助于提高兼容性

padding: 25px; //Firefox, Most browsers
!padding: 16px; //IE7
_padding: 20px; //IE6 

---

它可能适用于IE9，您使用的是哪个版本的IE？在IE10上似乎还可以

我看不出有什么不对，所以我只是猜测

要删除边框，请执行以下操作：

border:none;

这可能有助于提高兼容性

padding: 25px; //Firefox, Most browsers
!padding: 16px; //IE7
_padding: 20px; //IE6 

---

它可能适用于IE9

看起来IE对

和

标记之间的

标记不满意。我认为如果你用一个colspan和一个类把它们放在另一行，去掉20px的填充，你的渲染会更加一致

当我在IE开发者工具中修改源代码时，这有助于：

<table class="w_table">
  <tr>
    <td colSpan="3" style="padding:0px;">
      <h2>Wallpaper</h2>
    </td>
  </tr>
  <tr>
    <td class="firsttd"><a href="#"><img src="images/products/companions/wallpaper1.jpg"></a></td>
    <td><a href="#"><img src="images/products/companions/wallpaper2.jpg"></a></td>
    <td><a href="#"><img src="images/products/companions/wallpaper3.jpg"></a></td>
  </tr>
</table>

墙纸
看起来IE对
和
标签之间的
标签不满意。我认为如果你用一个colspan和一个类把它们放在另一行，去掉20px的填充，你的渲染会更加一致

当我在IE开发者工具中修改源代码时，这有助于：

<table class="w_table">
  <tr>
    <td colSpan="3" style="padding:0px;">
      <h2>Wallpaper</h2>
    </td>
  </tr>
  <tr>
    <td class="firsttd"><a href="#"><img src="images/products/companions/wallpaper1.jpg"></a></td>
    <td><a href="#"><img src="images/products/companions/wallpaper2.jpg"></a></td>
    <td><a href="#"><img src="images/products/companions/wallpaper3.jpg"></a></td>
  </tr>
</table>


墙纸
我没有用jquery设计任何样式，我只是让选项卡工作。它的样式仅通过css样式表。您可以在我提供的url页面上查看html和js。因此鼓励在网站上发布相关代码。除非是JSFIDLE之类的东西，否则对外链接通常不会被看好。啊，我错了。我现在看到了，我刚刚编辑了我的帖子。这对我来说不是一个问题，我只是觉得在网站上查看会更容易。是的，去掉h2对h2有效，但表格仍然存在问题。去他妈的，我只是为ie做一个单独的样式表。我没有用jquery做任何样式，我只是让选项卡工作。它的样式仅通过css样式表。您可以在我提供的url页面上查看html和js。因此鼓励在网站上发布相关代码。除非是JSFIDLE之类的东西，否则对外链接通常不会被看好。啊，我错了。我现在看到了，我刚刚编辑了我的帖子。这对我来说不是一个问题，我只是觉得在网站上查看会更容易。是的，去掉h2对h2有效，但表格仍然存在问题。去它的，我只是为ie.ie 9做一个单独的样式表。你能在“墙纸”和“打印纸”上看到边框和填充物吗？与在firefox（例如IE 9）中查看时相同。你能在“墙纸”和“打印纸”上看到边框和填充物吗？与在firefox中查看时相同？是的，去掉h2对h2有效，但表仍然存在问题。算了吧，我只需要为ie做一个单独的样式表。是的，去掉h2对h2有效，但是表格仍然存在问题。去它的，我只是为ie做一个单独的样式表。