CSS Internet Explorer 9 和 10 的问题

Question

我正在实现一个类似结构的简单选项卡。当您单击选项卡时，它会打开一些内容。问题是，当我单击第一个选项卡时，第二个和第三个选项卡会移动，理想情况下它们不应该移动。对于所有最新版本，我使用的是 flex，因此问题仅针对不支持 flexbox 的 IE9 和 IE10。

.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

您正在使用手风琴，它不像 bootstrap 标签那样用于 'tabs'。

.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 2

尝试使用 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 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>

CSS Internet Explorer 9 和 10 的问题

CSS issue for internet explorer 9 and 10

html

css

internet-explorer

internet-explorer-9

internet-explorer-10