Internet Explorer 9和10的CSS問題

Question

我正在實現一個類似於結構的簡單選項卡。當你點擊標籤時，它會打開一些內容。 問題是，當我點擊第一個標籤的第二個和第三個移動，理想情況下，他們不應該。 對於所有最新版本，我正在使用flex，因此問題僅限於IE9和IE10，不支持flexbox。

.tab { 
 
    background: #eee; 
 
    cursor: pointer; 
 
    padding: 10px 15px 10px 20px; 
 
    display: inline-block; 
 
} 
 

 
.tab-radio:checked + .tab { 
 
    background: #000000; 
 
    color: #ffffff; 
 
} 
 

 
.tab-radio { 
 
    display: none; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
.tab-radio:checked + label + .tab-content { 
 
    display: block; 
 
}

<div class="accordion"> 
 
    <!-- "For" should point to the input so that we can check the radio using the label. --> 
 
    <input id="1" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="1">title 1</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 1</h4> 
 
     Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[]. 
 
    </div> 
 
    <input id="2" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="2"> title 2 which is really long</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 2</h4> 
 
     Now that we have our top-level application component, let’s write the ProductsList component, 
 
    </div> 
 
    <input id="3" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="3">title 3</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 3</h4> 
 
     Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, 
 
     
 
    </div> 
 
    </div>

Answer 1

嘗試使用float和負利潤率定位從內容

.tab { 
 
    background: #eee; 
 
    cursor: pointer; 
 
    padding: 10px 15px 10px 20px; 
 
    float: left; 
 
} 
 

 
.tab-radio:checked + .tab { 
 
    background: #000000; 
 
    color: #ffffff; 
 
} 
 

 
.tab-radio { 
 
    display: none; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    width: 100%; 
 
    float: right; 
 
    margin : 2.5em 0 0 -100%; 
 
} 
 

 
.tab-radio:checked + label + .tab-content { 
 
    display: block; 
 
}

<div class="accordion"> 
 
    <!-- "For" should point to the input so that we can check the radio using the label. --> 
 
    <input id="1" class="tab-radio" name="tab-choice" type="radio" /> 
 
    <label class="tab" for="1">title 1</label> 
 
    <div class="tab-content"> 
 
    <h4>Heading 1</h4> Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[]. 
 
    </div> 
 
    <input id="2" class="tab-radio" name="tab-choice" type="radio" /> 
 
    <label class="tab" for="2"> title 2 which is really long</label> 
 
    <div class="tab-content"> 
 
    <h4>Heading 2</h4> Now that we have our top-level application component, let’s write the ProductsList component, 
 
    </div> 
 
    <input id="3" class="tab-radio" name="tab-choice" type="radio" /> 
 
    <label class="tab" for="3">title 3</label> 
 
    <div class="tab-content"> 
 
    <h4>Heading 3</h4> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, 
 

 
    </div> 
 
</div>

Answer 2

您使用手風琴，它不是像引導標籤「標籤」。

.tab { 
 
    background: #eee; 
 
    cursor: pointer; 
 
    padding: 10px 15px 10px 20px; 
 
    display: inline-block; 
 
} 
 

 
.tab-radio:checked + .tab { 
 
    background: #000000; 
 
    color: #ffffff; 
 
} 
 

 
.tab-radio { 
 
    display: none; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
.tab-radio:checked + label + .tab-content { 
 
    display: block; 
 
}

<div class="accordion"> 
 
    <!-- "For" should point to the input so that we can check the radio using the label. --> 
 
    <input id="1" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="1">title 1</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 1</h4> 
 
     Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[]. 
 
    </div> <Br> 
 
    <input id="2" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="2"> title 2 which is really long</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 2</h4> 
 
     Now that we have our top-level application component, let’s write the ProductsList component, 
 
    </div> <br> 
 
    <input id="3" class="tab-radio" name="tab-choice" type="radio"/> 
 
    <label class="tab" for="3">title 3</label> 
 
    <div class="tab-content"> 
 
     <h4>Heading 3</h4> 
 
     Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, 
 
     
 
    </div> 
 
    </div>

Answer 3

我知道你可能會尋找一個CSS不同的標籤唯一的解決方案，但我想我會扔JS示例說明實施起來有多容易。此外還有額外的好處，不必有更多限制性的標記關係。

我使用data-屬性將標籤映射到它的內容，反之亦然。標籤和內容通過在data-content和data-tab屬性中分配相同的值進行連接。

var $tabs = $('.tabs li'), 
 
    $content = $('.tab-content'); 
 
    
 
$tabs.on('click', function (e) { 
 
    
 
    var $this = $(this); 
 

 
    $tabs.removeClass('active'); 
 
    $content.removeClass('active'); 
 
    
 
    $this.addClass('active'); 
 
    $('[data-tab="' + $this.data('content') + '"]').addClass('active'); 
 
    
 
});

.tabs, 
 
.tabs li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tabs li { 
 
    display: inline; 
 
    padding: 10px 15px 10px 20px; 
 
    background-color: #EEE; 
 
    cursor: pointer; 
 
} 
 
.tabs li.active { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
} 
 

 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="accordion"> 
 

 
    <ul class="tabs"> 
 
    <li data-content="1">Title 1</li> 
 
    <li data-content="2">Title 2 which is really long</li> 
 
    <li data-content="3">Title 3</li> 
 
    </ul> 
 
    
 
    <div class="tab-content" data-tab="1"> 
 
    
 
    <h4>Heading 1</h4> 
 
    <p> 
 
     Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[]. 
 
    </p> 
 
    
 
    </div> 
 
    
 
    <div class="tab-content" data-tab="2"> 
 
    
 
    <h4>Heading 2</h4> 
 
    <p> 
 
     Now that we have our top-level application component, let’s write the ProductsList component, 
 
    </p> 
 
    
 
    </div> 
 
    
 
    <div class="tab-content" data-tab="3"> 
 
    
 
    <h4>Heading 3</h4> 
 
    <p> 
 
     Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, 
 
    </p> 
 
    
 
    </div> 
 
    
 
</div>