0

我一直在寻找一种让 CSS 内容选项卡在 IE 8 及更高版本中工作但运气不佳的方法？我承认，虽然我对 CSS “没问题”，但我不知道如何为 CSS 制作 IE hack？我正在尝试使用的 CSS 在我测试过的所有其他内容中都非常有效，如下所示：

.hiddenTarget {display:none; position:fixed;}
.tabbedPages {position:relative;}
ul.tabs {padding:0; margin:0; list-style:none; float:left; position:relative; z-index:100;}
ul.tabs li {float:left; margin-right:2px;}
ul.tabs li a {display:block; font:normal 12px/30px; border:1px solid #AEAEAE; border-radius:5px 5px 0 0; background:#AEAEAE; padding:0 20px; text-decoration:none; color:#fff; font-weight: bold; }

.tabcontent {float:left; width:565px; padding:20px; border:1px solid #AEAEAE; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {padding:0 0 5px 0; margin:0; font:normal 12px/20px; color:#333;}
.tabcontent h4 {padding:0 0 10px 0; margin:0; font:bold 14px/25px arial, sans-serif; color:#000;}

#tabimg {border:1px solid #444; display:block; float:left; margin:0 20px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5 {background-color:#FFFFFF; border-bottom:1px solid #fff; color:#444444; font-weight: bold;}

/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5 {display:block;}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default {background-color:#AEAEAE; border:1px solid #888; color:#fff;}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default, #tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default {display:none;}

.clear {clear:left;}

HTML如下：

<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<div class="tabbedPages">
  <ul class="tabs">
  </ul>
  <div id="view1" class="tabcontent default">
    <h1>Manufacturer's Desription</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue elit nec nunc pharetra euismod. Donec id vestibulum libero. Sed ut adipiscing metus. Praesent feugiat purus ut sollicitudin pellentesque. Nam dictum dui vel eros elementum gravida. Morbi augue urna, aliquam sed condimentum consequat, tristique sed felis. Suspendisse accumsan, dui quis tincidunt scelerisque, sem mauris eleifend turpis, vitae vestibulum purus leo nec mauris. Donec eu lobortis nisi. Etiam ullamcorper malesuada risus, a facilisis arcu rhoncus vel. Cras tincidunt rutrum mauris, quis bibendum odio commodo eu. </div>
  <div id="view2" class="tabcontent">
    <h1>Manufacturer's Specifications</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue elit nec nunc pharetra euismod. Donec id vestibulum libero. Sed ut adipiscing metus. Praesent feugiat purus ut sollicitudin pellentesque. Nam dictum dui vel eros elementum gravida. Morbi augue urna, aliquam sed condimentum consequat, tristique sed felis. Suspendisse accumsan, dui quis tincidunt scelerisque, sem mauris eleifend turpis, vitae vestibulum purus leo nec mauris. Donec eu lobortis nisi. Etiam ullamcorper malesuada risus, a facilisis arcu rhoncus vel. Cras tincidunt rutrum mauris, quis bibendum odio commodo eu. </div>
  <div id="view3" class="tabcontent">
    <h1>Downloads</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue elit nec nunc pharetra euismod. Donec id vestibulum libero. Sed ut adipiscing metus. Praesent feugiat purus ut sollicitudin pellentesque. Nam dictum dui vel eros elementum gravida. Morbi augue urna, aliquam sed condimentum consequat, tristique sed felis. Suspendisse accumsan, dui quis tincidunt scelerisque, sem mauris eleifend turpis, vitae vestibulum purus leo nec mauris. Donec eu lobortis nisi. Etiam ullamcorper malesuada risus, a facilisis arcu rhoncus vel. Cras tincidunt rutrum mauris, quis bibendum odio commodo eu. </div>
  <div id="view4" class="tabcontent">
    <h1>Frequently Asked Questions</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue elit nec nunc pharetra euismod. Donec id vestibulum libero. Sed ut adipiscing metus. Praesent feugiat purus ut sollicitudin pellentesque. Nam dictum dui vel eros elementum gravida. Morbi augue urna, aliquam sed condimentum consequat, tristique sed felis. Suspendisse accumsan, dui quis tincidunt scelerisque, sem mauris eleifend turpis, vitae vestibulum purus leo nec mauris. Donec eu lobortis nisi. Etiam ullamcorper malesuada risus, a facilisis arcu rhoncus vel. Cras tincidunt rutrum mauris, quis bibendum odio commodo eu. </div>
</div>

任何帮助将不胜感激！

4

0 回答 0