0

在页面的右侧有一些我用 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>
4

3 回答 3

3

看起来 IE 对 和标签<h2>之间的标签不满意。我认为，如果您使用 colspan 和一个类将它们粘贴在另一行以删除 20px 填充，您将获得更一致的渲染。<table><tr>

当我在 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>
于 2013-03-05T23:24:25.530 回答
2

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

于 2013-03-05T22:54:54.673 回答
0

你用的是什么版本的IE？IE10上好像没问题

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

要删除边框：

border:none;

这可能会帮助您提高兼容性

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

它可能适用于 IE9

于 2013-03-05T22:55:04.020 回答