0

CSS コンテンツ タブを IE 8 以降で機能させる方法を探しましたが、うまくいきませんでした。私はCSSで「大丈夫」ですが、CSSのIEハックを作成する方法がわかりませんか? 私が使用しようとしている 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