html - Internet Explorer 9 和 10 的 CSS 问题

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

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