Internet Explorer 9和10的CSS问题

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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属性中指定相同的值来加入标签和内容。

＆＃13;

＆＃13;

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' );
  
} );

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;