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>