IE11伪元素在文本后内联

Question

如何设置此项以便我们的服务在一条线上，问题是使用版本11进行IE测试

http://codepen.io/anon/pen/WbNGMG

CSS：

ul.megamenu {
    list-style: outside none none;
    margin: 0;
    opacity: 1;
    padding: 0;
    z-index: 0;
}
ul.megamenu > li {
    float: left;
    margin: 18px 0 0;
    padding: 0 0 16px;
    width: auto;
}
ul.megamenu > li > a {
    border-radius: 2px;
    color: #000;
    display: block;
    font-size: 14px;
    line-height: 14px;
    margin: -6px 0 0;
    padding: 10px 12px 7px;
    text-shadow: none;
    text-transform: uppercase;
    transition: all 200ms ease-in-out 0s;
}
ul.megamenu > li > a span {
    display: block;
    position: relative;
}
ul.megamenu > li.with-sub-menu > a > span > strong:before {
    background: none;
    border-color: #000 transparent transparent;
    border-image: none;
    border-right: 4px solid transparent;
    border-style: solid;
    border-width: 4px;
    content: "";
    display: inline-block;
    float: right;
    height: 4px;
    margin-left: 6px;
    margin-top: 5px;
    width: 4px;
}

Answer 1

以下CSS更改应解决此问题：

• 将ul.megamenu > li.with-sub-menu > a > span > strong:before更改为ul.megamenu > li.with-sub-menu > a > span > strong:after，将元素放在文本
之后
• 将vertical-align: middle;添加到ul.megamenu > li.with-sub-menu > a > span > strong:after以将其与文字中间对齐
• 从float: right;移除ul.megamenu > li.with-sub-menu > a > span > strong:after，因为如果您有display: inline-block;
则不需要ul.megamenu { list-style: outside none none; margin: 0; opacity: 1; padding: 0; z-index: 0; } ul.megamenu > li { float: left; margin: 18px 0 0; padding: 0 0 16px; width: auto; } ul.megamenu > li > a { border-radius: 2px; color: #000; display: block; font-size: 14px; line-height: 14px; margin: -6px 0 0; padding: 10px 12px 7px; text-shadow: none; text-transform: uppercase; transition: all 200ms ease-in-out 0s; } ul.megamenu > li > a span { display: block; position: relative; } ul.megamenu > li.with-sub-menu > a > span > strong:after { background: none; border-color: #000 transparent transparent; border-image: none; border-right: 4px solid transparent; border-style: solid; border-width: 4px; content: ""; display: inline-block; height: 4px; margin-left: 6px; margin-top: 5px; width: 4px; vertical-align: middle }

＆＃13;

＆＃13;

<ul class="megamenu">
	<li class="">
		<a href="">
			<span>
				<strong>Home</strong>
			</span>
		</a>
	</li>
	<li class="">
		<a href="">
			<span>
				<strong>Our Products</strong>
			</span>
		</a>
	</li>
	<li class="with-sub-menu">
		<a href="">
			<span>
				<strong>Our Services</strong>
			</span>
		</a>
	</li>
	<li class="">
		<a class="clearfix" href="">
			<span>
				<strong>Contact Us</strong>
			</span>
		</a>
	</li>
</ul>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Codepen： http://codepen.io/anon/pen/OPJREy

Answer 2

从样式中删除float:right。 （要使其正确，请使用::after代替::before）然后执行vertical-align: middle;，因为它是inline-block。

相关CSS：

ul.megamenu > li.with-sub-menu > a > span > strong::after {
    /* Use after pseudo-element to make it go right */
    display: inline-block;
    vertical-align: middle;
    /* float: right; -- Not Required, because we are using the "::after" */
}

演示：http://jsfiddle.net/v2r7vabj/1/