Jump to content
  • 0

Проблема вкладок-табов в IE

kiska

Asked by kiska,

 Share

Question

kiska Explorer

kiska

Posted
Posted

Ребята, помогите, пожалуйста! Уже не знаю где искать ответ.

Проблема в том, что IE8 не хочет правильно отображать вкладки на моем сайте! В Мозилле, Хроме, Опере и Сафари все отлично, а вот в Эксплорере просто кошмар!

Меня интересует вот эта страница: http://www.napule-de-canzone.com/teksty.html#tab2

Почему IE глючит????

Вот HTML:

<div class="menu1">

<br id="tab1"/><br id="tab2"/><br id="tab3"/><br id="tab4"/><br id="tab5"/><br id="tab6"/><br id="tab7"/><br id="tab8"/><br id="tab9"/><br id="tab10"/><br id="tab11"/><br id="tab12"/><br id="tab13"/><br id="tab14"/><br id="tab15"/><br id="tab16"/><br id="tab17"/><br id="tab18"/><br id="tab19"/><br id="tab20"/><br id="tab21"/>

<a href="#tab1">A</a><a href="#tab2">B</a><a href="#tab3">C</a><a href="#tab4">D</a><a href="#tab5">E</a><a href="#tab6">F</a><a href="#tab7">G</a><a href="#tab8">H</a><a href="#tab9">I</a><a href="#tab10">L</a><a href="#tab11">M</a><a href="#tab12">N</a><a href="#tab13">O</a><a href="#tab14">P</a><a href="#tab15">Q</a><a href="#tab16">R</a><a href="#tab17">S</a><a href="#tab18">T</a><a href="#tab19">U</a><a href="#tab20">V</a><a href="#tab21">Z</a>

<div><div id="kvad2">

<ul>

<li><a href="a_canzone_e_napule_rus.html">'A canzona 'e Napule <span>(1912)</span></a></li>

<li><a href="a_cartulina_e_napule_rus.html">'A cartulina 'e Napule <span>(1927)</span></a></li>

<li><a href="a_casa_e_donn_amalia_rus.html">'A casa 'e donn'Amalia <span>(1907)</span></a></li>

<li><a href="a_serenata_d_e_rrose_rus.html">'A serenata d' 'e rrose <span>(1899)</span></a></li>

<li><a href="a_serenata_e_pulecenella_rus.html">'A serenata 'e Pulecenella <span>(1916)</span></a></li>

<li><a href="a_sirena_rus.html">'A sirena <span>(1897)</span></a></li>

<li><a href="a_surrentina_rus.html">'A surrentina <span>(1905)</span></a></li>

<li><a href="a_testa_aruta_rus.html">'A testa aruta <span>(1893)</span></a></li>

<li><a href="a_vucchella_rus.html">'A vucchella <span>(1903)</span></a></li>

<li><a href="a_zingara_rus.html">'A zingara <span>(1927)</span></a></li>

<li><a href="addo_mme_vasa_rosa_rus.html">Addò mme vasa Rosa <span>(1907)</span></a></li>

<li><a href="adduormete_cu_mme_rus.html">Adduormete cu' mme <span>(1931)</span></a></li>

<li><a href="amalia_rus.html">Amalia <span>(1902)</span></a></li>

<li><a href="autunno_rus.html">Autunno <span>(1913)</span></a></li>

</ul>

</div>

</div>

<div><div id="kvad2">

<ul>

<li><a href="bella_ca_bella_si_rus.html">Bella, ca bella sì! <span>(1919)</span></a></li>

<li><a href="bionda_nun_chiagnere_rus.html">Bionda, nun chiagnere! <span>(1938)</span></a></li>

<li><a href="brinneso_rus.html">Brinneso <span>(1922)</span></a></li>

<li><a href="buongiorno_a_maria_rus.html">Buongiorno a Maria <span>(1916)</span></a></li>

</ul>

</div>

</div>

ну и т.д.

Вот CSS:

.menu1 {

width: auto;

height: auto;

background-color: none;

border: none;

margin: 1% 2% 49.5% 2%;

padding: 2%;

}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7, #tab8, #tab9, #tab10, #tab11, #tab12, #tab13, #tab14, #tab15, #tab16, #tab17, #tab18, #tab19, #tab20, #tab21 {display: none}

.menu1 >a,

.menu1 #tab1:target~a:nth-of-type(1),

.menu1 #tab2:target~a:nth-of-type(2),

.menu1 #tab3:target~a:nth-of-type(3),

.menu1 #tab4:target~a:nth-of-type(4),

.menu1 #tab5:target~a:nth-of-type(5),

.menu1 #tab6:target~a:nth-of-type(6),

.menu1 #tab7:target~a:nth-of-type(7),

.menu1 #tab8:target~a:nth-of-type(8),

.menu1 #tab9:target~a:nth-of-type(9),

.menu1 #tab10:target~a:nth-of-type(10),

.menu1 #tab11:target~a:nth-of-type(11),

.menu1 #tab12:target~a:nth-of-type(12),

.menu1 #tab13:target~a:nth-of-type(13),

.menu1 #tab14:target~a:nth-of-type(14),

.menu1 #tab15:target~a:nth-of-type(15),

.menu1 #tab16:target~a:nth-of-type(16),

.menu1 #tab17:target~a:nth-of-type(17),

.menu1 #tab18:target~a:nth-of-type(18),

.menu1 #tab19:target~a:nth-of-type(19),

.menu1 #tab20:target~a:nth-of-type(20),

.menu1 #tab21:target~a:nth-of-type(21) {

width: 3%;

height: 3%;

background-color: #fff;

border: 1px solid #000;

text-decoration: none;

text-align: center;

padding: 1.5%;

font-size: 135%;

color: #000}

.menu1 >a:nth-of-type(0),

.menu1 #tab1:target~a:nth-of-type(1),

.menu1 #tab2:target~a:nth-of-type(2),

.menu1 #tab3:target~a:nth-of-type(3),

.menu1 #tab4:target~a:nth-of-type(4),

.menu1 #tab5:target~a:nth-of-type(5),

.menu1 #tab6:target~a:nth-of-type(6),

.menu1 #tab7:target~a:nth-of-type(7),

.menu1 #tab8:target~a:nth-of-type(8),

.menu1 #tab9:target~a:nth-of-type(9),

.menu1 #tab10:target~a:nth-of-type(10),

.menu1 #tab11:target~a:nth-of-type(11),

.menu1 #tab12:target~a:nth-of-type(12),

.menu1 #tab13:target~a:nth-of-type(13),

.menu1 #tab14:target~a:nth-of-type(14),

.menu1 #tab15:target~a:nth-of-type(15),

.menu1 #tab16:target~a:nth-of-type(16),

.menu1 #tab17:target~a:nth-of-type(17),

.menu1 #tab18:target~a:nth-of-type(18),

.menu1 #tab19:target~a:nth-of-type(19),

.menu1 #tab20:target~a:nth-of-type(20),

.menu1 #tab21:target~a:nth-of-type(21) {

background-color: #fff;

color: #000;

border-bottom: none}

.menu1 >active,

.menu1 #tab1:target~a:nth-of-type(1),

.menu1 #tab2:target~a:nth-of-type(2),

.menu1 #tab3:target~a:nth-of-type(3),

.menu1 #tab4:target~a:nth-of-type(4),

.menu1 #tab5:target~a:nth-of-type(5),

.menu1 #tab6:target~a:nth-of-type(6),

.menu1 #tab7:target~a:nth-of-type(7),

.menu1 #tab8:target~a:nth-of-type(8),

.menu1 #tab9:target~a:nth-of-type(9),

.menu1 #tab10:target~a:nth-of-type(10),

.menu1 #tab11:target~a:nth-of-type(11),

.menu1 #tab12:target~a:nth-of-type(12),

.menu1 #tab13:target~a:nth-of-type(13),

.menu1 #tab14:target~a:nth-of-type(14),

.menu1 #tab15:target~a:nth-of-type(15),

.menu1 #tab16:target~a:nth-of-type(16),

.menu1 #tab17:target~a:nth-of-type(17),

.menu1 #tab18:target~a:nth-of-type(18),

.menu1 #tab19:target~a:nth-of-type(19),

.menu1 #tab20:target~a:nth-of-type(20),

.menu1 #tab21:target~a:nth-of-type(21) {

width: 3%;

height: 3%;

background-color: #999;

border: 1px solid #000;

text-decoration: none;

text-align: center;

padding: 1.5%;

font-size: 135%;

color: #fff}

.menu1 >active:nth-of-type(0),

.menu1 #tab1:target~a:nth-of-type(1),

.menu1 #tab2:target~a:nth-of-type(2),

.menu1 #tab3:target~a:nth-of-type(3),

.menu1 #tab4:target~a:nth-of-type(4),

.menu1 #tab5:target~a:nth-of-type(5),

.menu1 #tab6:target~a:nth-of-type(6),

.menu1 #tab7:target~a:nth-of-type(7),

.menu1 #tab8:target~a:nth-of-type(8),

.menu1 #tab9:target~a:nth-of-type(9),

.menu1 #tab10:target~a:nth-of-type(10),

.menu1 #tab11:target~a:nth-of-type(11),

.menu1 #tab12:target~a:nth-of-type(12),

.menu1 #tab13:target~a:nth-of-type(13),

.menu1 #tab14:target~a:nth-of-type(14),

.menu1 #tab15:target~a:nth-of-type(15),

.menu1 #tab16:target~a:nth-of-type(16),

.menu1 #tab17:target~a:nth-of-type(17),

.menu1 #tab18:target~a:nth-of-type(18),

.menu1 #tab19:target~a:nth-of-type(19),

.menu1 #tab20:target~a:nth-of-type(20),

.menu1 #tab21:target~a:nth-of-type(21) {

background-color: #999;

color: #fff;

border-bottom: none}

.menu1 >a:hover {background-color: #ccc; color: #000; text-decoration: none}

.menu1 >div,

.menu1 #tab1:target~div:nth-of-type(1),

.menu1 #tab2:target~div:nth-of-type(1),

.menu1 #tab3:target~div:nth-of-type(1),

.menu1 #tab4:target~div:nth-of-type(1),

.menu1 #tab5:target~div:nth-of-type(1),

.menu1 #tab6:target~div:nth-of-type(1),

.menu1 #tab7:target~div:nth-of-type(1),

.menu1 #tab8:target~div:nth-of-type(1),

.menu1 #tab9:target~div:nth-of-type(1),

.menu1 #tab10:target~div:nth-of-type(1),

.menu1 #tab11:target~div:nth-of-type(1),

.menu1 #tab12:target~div:nth-of-type(1),

.menu1 #tab13:target~div:nth-of-type(1),

.menu1 #tab14:target~div:nth-of-type(1),

.menu1 #tab15:target~div:nth-of-type(1),

.menu1 #tab16:target~div:nth-of-type(1),

.menu1 #tab17:target~div:nth-of-type(1),

.menu1 #tab18:target~div:nth-of-type(1),

.menu1 #tab19:target~div:nth-of-type(1),

.menu1 #tab20:target~div:nth-of-type(1),

.menu1 #tab21:target~div:nth-of-type(1) {

display: none;

padding-top: 1%;

border: #fff;

background-color: none}

.menu1 >div:nth-of-type(0),

.menu1 #tab1:target~div:nth-of-type(1),

.menu1 #tab2:target~div:nth-of-type(2),

.menu1 #tab3:target~div:nth-of-type(3),

.menu1 #tab4:target~div:nth-of-type(4),

.menu1 #tab5:target~div:nth-of-type(5),

.menu1 #tab6:target~div:nth-of-type(6),

.menu1 #tab7:target~div:nth-of-type(7),

.menu1 #tab8:target~div:nth-of-type(8),

.menu1 #tab9:target~div:nth-of-type(9),

.menu1 #tab10:target~div:nth-of-type(10),

.menu1 #tab11:target~div:nth-of-type(11),

.menu1 #tab12:target~div:nth-of-type(12),

.menu1 #tab13:target~div:nth-of-type(13),

.menu1 #tab14:target~div:nth-of-type(14),

.menu1 #tab15:target~div:nth-of-type(15),

.menu1 #tab16:target~div:nth-of-type(16),

.menu1 #tab17:target~div:nth-of-type(17),

.menu1 #tab18:target~div:nth-of-type(18),

.menu1 #tab19:target~div:nth-of-type(19),

.menu1 #tab20:target~div:nth-of-type(20),

.menu1 #tab21:target~div:nth-of-type(21) {

display: block}

ПОМОГИТЕ ПОЖАЛУЙСТА !!!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

IE8 и ниже не понимает новые селекторы типа :target и :nth-of-type. Существует «костыль» selectivizr, который, в теории, может его «научить» (правда, говорят, что он конфликтует с другими «костылями»). Но лично я бы сделал целиком на JS — вышло бы и короче (без 21-этажных селекторов), и универсальнее.

Link to comment
Share on other sites
  • 0
kiska Explorer

kiska

Posted
  • Author
Posted

Пишете

[ code ]

Здесь пишете код. [ code ] без пробелов

[ /code ]

чтобы код в посте был оформлен нормально, а не таким полотном как сейчас

а разве код не отображается нормально??? попробую как вы говорите:

<br id="tab1"/><br id="tab2"/><br id="tab3"/><a href="#tab1">A</a><a href="#tab2">B</a><a href="#tab3">C</a><div><ul>
<li><a href="a_canzone_e_napule_rus.html">'A canzona 'e Napule <span>(1912)</span></a></li>
<li><a href="a_cartulina_e_napule_rus.html">'A cartulina 'e Napule <span>(1927)</span></a></li>
<li><a href="a_casa_e_donn_amalia_rus.html">'A casa 'e donn'Amalia <span>(1907)</span></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="bella_ca_bella_si_rus.html">Bella, ca bella sì! <span>(1919)</span></a></li>
<li><a href="bionda_nun_chiagnere_rus.html">Bionda, nun chiagnere! <span>(1938)</span></a></li>
<li><a href="brinneso_rus.html">Brinneso <span>(1922)</span></a></li></ul></div>
<div>
<ul>
<li><a href="campagno_rus.html">Campagnò <span>(1908)</span></a></li>
<li><a href="canta_pe_mme_rus.html">Canta pe' mme <span>(1909)</span></a></li>
<li><a href="canzona_a_capri_rus.html">Canzona a Capri <span>(1936)</span></a></li>
</ul>
<div>

IE8 и ниже не понимает новые селекторы типа :target и :nth-of-type. Существует «костыль» selectivizr, который, в теории, может его «научить» (правда, говорят, что он конфликтует с другими «костылями»). Но лично я бы сделал целиком на JS — вышло бы и короче (без 21-этажных селекторов), и универсальнее.

21 селектор потому что вкладок 21 (английский алфавит от A до Z), поэтому сократить не получится :unsure:

Link to comment
Share on other sites
  • 0
kiska Explorer

kiska

Posted
  • Author
Posted

IE8 и ниже не понимает новые селекторы типа :target и :nth-of-type. Существует «костыль» selectivizr, который, в теории, может его «научить» (правда, говорят, что он конфликтует с другими «костылями»). Но лично я бы сделал целиком на JS — вышло бы и короче (без 21-этажных селекторов), и универсальнее.

что-то этот костыль ничего не дает или я что-то не так делаю...

может есть другой способ заставить IE8 распознать эти селекторы ?? не хочется все переделывать, тем более что в джава скриптах я мало что понимаю :unsure:

как я поняла с IE9 проблем не должно быть

Link to comment
Share on other sites
  • 0
kiska Explorer

kiska

Posted
  • Author
Posted (edited)

IE8 и ниже не понимает новые селекторы типа :target и :nth-of-type. Существует «костыль» selectivizr, который, в теории, может его «научить» (правда, говорят, что он конфликтует с другими «костылями»). Но лично я бы сделал целиком на JS — вышло бы и короче (без 21-этажных селекторов), и универсальнее.

что-то этот костыль ничего не дает или я что-то не так делаю...

может есть другой способ заставить IE8 распознать эти селекторы ?? не хочется все переделывать, тем более что в джава скриптах я мало что понимаю :unsure:

как я поняла с IE9 проблем не должно быть

Ребята !!! УРАААА!!!

Я нашла решение этой проблемы !!!! Стоит всего лишь прописать в <head>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

и проблемы НЕТ!!! IE 8 все распознает !!! тестировала и в IE6 и IE7 там тоже все ок !!! УРАААА :yahoo:

Edited by kiska
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept