Internet Explorer 9和10的CSS问题
我正在实现一个类似于结构的简单选项卡。当你点击标签时,它会打开一些内容。 问题是,当我点击第一个标签的第二个和第三个移动,理想情况下,他们不应该。 对于所有最新版本,我正在使用flex,因此问题仅限于IE9和IE10,不支持flexbox。 Internet Explorer 9和10的CSS问题
.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>
尝试使用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>
您使用手风琴,它不是像引导标签“标签”。
.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>
不要使用标签br,你可以用css – SpaceDogCS
来做到这一点,我不希望它是手风琴。它假设是内联选项卡。 它将转向小屏幕手风琴,但这完全是另一回事。 –
我知道你可能会寻找一个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?对于其他版本 – SpaceDogCS
如果我添加其他CSS,你将不得不将浏览器切换到IE9看其效果:)这将是反效果不? –
不,不,我只想看看它应该如何像 – SpaceDogCS