[英]IE7 Float left adds element on a new line
This is the html. 这是html。
<h3 class="accordion-title">
Lorem ipsum dolor sit amet.
<span class="accordion-title-icon plus"></span>
</h3>
And this is the css. 这就是CSS。
.accordion-title {
width: 540px;
padding: 5px;
margin: 0;
background-image: none;
font-weight: bold;
color: #e1c58a;
background-color: #2f2c27;
border: 1px solid #433f38;
}
.accordion-title .accordion-title-icon {
background-image: url('../img/accordion_icons.png');
background-repeat: no-repeat;
width: 11px;
height: 11px;
float: right;
margin-top: 2px;
margin-right: 2px;
}
.accordion-title .accordion-title-icon.plus {
background-position: 0 0;
}
.accordion-title .accordion-title-icon.minus {
background-position: -11px 0;
}
It works fine on Edge as you can see on this example : 在本示例中,您可以在Edge上正常工作:
But it breaks up on a new line on Internet Explorer 7. 但它在Internet Explorer 7的新行中分解。
Any ideas? 有任何想法吗?
This is strange, it works if I change the html markup like this : 这很奇怪,如果我像这样更改html标记,它将起作用:
<h3 class="accordion-title">
<span class="accordion-title-icon plus"></span>
Lorem ireum dolor sit amet.
</h3>
Any better ideas? 还有更好的主意吗?
I'm assuming dropping IE7 is not an option, so here are some suggestions: 我假设删除IE7是不可行的,所以这里有一些建议:
Try setting the span element to float: left
. 尝试将span元素设置为
float: left
。
Or you could let the icon as a block and shift it up with eg margin-top: -25px;
或者,您也可以将图标作为一个块并向上移动,例如,
margin-top: -25px;
. 。
Other solution would require to set the parent to relative positioning and then move the icon absolutely: 其他解决方案将需要将父级设置为相对位置,然后绝对移动图标:
.accordion-title { position: relative ... } .accordion-title .accordion-title-icon { position: absolute; top: 2px; right: 2px ... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.