В Chrome правильные столбцы начальной загрузки, но они не отображаются в Internet Explorer 11.?

Question

У меня есть строка класса контейнера, которая состоит из двух столбцов col-md-6 каждый.Столбцы в Chrome верны, но в IE 11 правый столбец находится под левым столбцом.Как мы можем исправить это, эта проблема только в IE.Чтобы проверить полные результаты, пожалуйста, нажмите [здесь]: http://risalat1.com/projects/accordv1/ это я пытался добавить метатег в заголовке X-UA-Compatible, но не сработал соответствующим образом. Ниже приведено изображение Chrome.

Результаты в Internet Explorer 11 дают следующие значения:

<div class="common top_bar">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <span class="header_no"></span>
                <span class="header_email"></span>
            </div>
            <div class="col-md-6">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

.top_bar{
	background: #67c152;
    padding-top: 10px;
    padding-bottom: 10px;
}
.top_bar ul{
	text-align: right;
	margin-top:-4px;
}
.top_bar ul li:first-child a {
    margin-right: 10px;
}
.top_bar ul li a {
    margin-top: 3px;
    display: block;
}
.top_bar span{
	font-family:"Lato-Light";
	font-size: 18px;
	color: white;	
	font-weight: normal;
	padding-left: 30px;
}
.top_bar span:first-child{
	margin-right: 35px;
}

<div class="common top_bar">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<span class="header_no">092093090</span>
					<span class="header_email">email@example</span>
				</div>
				<div class="col-md-6">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

Answer 1

<style>

.top_bar ul{
	text-align: right;
	margin-top:-4px;
    width:100%;
}

.top_bar ul li{
	display:inline-block;
}
</style>

<div class="col-md-6" style="float:left">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

Answer 2

Исходя из результатов моего тестирования, выглядит как Ms-flex и flex , создающие эту проблему.

Если вы удалите ее, она сможет правильно отобразить меню.

Answer 3

Вы должны попытаться использовать примеры BS в качестве основы, а затем настроить цвета и т. Д. По своему вкусу. Эта страница содержит множество примеров верхних навигационных панелей. Вы можете легко добавлять и вычитать классы, чтобы изменить фиксированное положение, цвет фона и т. Д.

Вы также можете использовать Поля BS и отступы вместо добавления дополнительной работы для себя.

По сути рычаг БС как можно больше, чтобы делать то, что вам нужно.