Question

在页面的右侧，我使用jQuery制作了一些标签（配色，摄影和伴侣）。但是，我注意到IE（令人惊讶的是）无法识别h2上的填充和边框以及同伴下的表格。

普通浏览器渲染得很好，只是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>

Answer 1

看起来IE对<h2>和<table>标记之间的<tr>标记不满意。我想如果你把它们放在另一行用一个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>

Answer 2

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

Answer 3

您使用的是哪个版本的IE？在IE10上似乎没问题

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

删除边框：

border:none;

这可能会帮助您兼容

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

它可能适用于IE9

IE无法识别填充和边框

3 个答案: