中心对齐仅在IE版本中断

时间：2017-05-25 09:24:33

标签： html css internet-explorer

我想在叠加层上居中对齐菜单，这在Chrome＆amp; FF，但在IE 11中有相同的中断，我不确定这个问题是否是由于最新版本的IE。

不确定为什么它会在IE http://jsbin.com/wobumugaxi/edit?html,css,output

中中断

我想简单地对齐菜单

*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.70);
overflow:auto;
z-index:9999;
}
body{background-color:green;}
/*.wrap {
color:#fff;
text-align:center;
max-width:100%;
margin:0 auto;
width:100%;
}*/
.wrap {
align-items: center;
color: #fff;
display: flex !important;
height: 100% !important;
margin: 0 auto;
max-width: 100%;
text-align: center;
width: 100%;
}
/*.wrap ul.wrap-nav {
border-bottom:0px solid #575757;
text-transform:capitalize;
padding:150px 0px 100px;
}*/
.wrap ul.wrap-nav {
border-bottom: 0 solid #575757;
display: table-cell;
height: 170px;
margin: auto !important;
padding: 0;
position: relative !important;
text-transform: capitalize;
}
.wrap ul.wrap-nav li {
font-size:14px;
text-transform:uppercase;
display:inline-block;
vertical-align:top;
width:70px;
padding:14px;
position:relative;
margin:0 7px;
}

.menu-img{
border-radius:100px;
width:60px
}
.wrap ul.wrap-nav li a {
font-family:"Lato",sans-serif;
font-weight:600;
color:#fff;
display:block;
padding:10px 0;
width:60px;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;

}
.wrap ul.wrap-nav li a:hover {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color:#34B484;
}
.footer-hp{
background-color:#282F20;
width:100%;
height:28px;
position:absolute;
bottom:0;
text-align:center;
font-size:13px;
font-family:"Josefin Sans","Roboto Condensed",sans-serif !important;
color:#fff;
padding:3px;
}
.footer-hp p{
margin:0;
margin-top:2px;
}
.home-h1{
color: #fff !important;
font-size: 50px !important;
font-weight: 500;
margin-top:0px;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.home-h3{
color: #fff !important;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
}
.nivo-lightbox-theme-default .nivo-lightbox-close {
display: block;
text-indent: -9999px;
}
.nivo-lightbox-theme-default a.nivo-lightbox-close::before, .nivo-lightbox-theme-default a.nivo-lightbox-close::after {
background-color: #000;
content: " ";
height: 33px;
left: 15px;
position: absolute;
width: 0px;
}
.btnplayvideo{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
.btnbrochure{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
<div class="overlay" style="display: block;">
	        <div class="wrap">
	
		        <ul class="wrap-nav">
				            <li><img class="menu-img" alt="Home" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/">Home</a>
				            <li><img class="menu-img" alt="Menu 2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"> <a href="/Menu2/">One</a></li>
				            <li><img class="menu-img" alt="Menu 3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu2/">Two</a></li>
                            <li><img class="menu-img" alt="Menu 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu4/">Four</a></li>
                            <li><img class="menu-img" alt="Menu 5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="//">Three</a></li>
			            </ul>

		        </div>
	        </div>

2 个答案:

答案 0 :(得分：0)

更改此CSS 

.wrap ul.wrap-nav {
border-bottom: 0 solid #575757;
display: block;/*Remove table-cell*/
}


/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.70);
overflow:auto;
z-index:9999;
}
body{background-color:green;}
/*.wrap {
color:#fff;
text-align:center;
max-width:100%;
margin:0 auto;
width:100%;
}*/
.wrap {
align-items: center;
color: #fff;
display: flex !important;
height: 100% !important;
margin: 0 auto;
max-width: 100%;
text-align: center;
width: 100%;
}
/*.wrap ul.wrap-nav {
border-bottom:0px solid #575757;
text-transform:capitalize;
padding:150px 0px 100px;
}*/
.wrap ul.wrap-nav {
border-bottom: 0 solid #575757;
display: block;
height: 170px;
margin: auto !important;
padding: 0;
position: relative !important;
text-transform: capitalize;
}
.wrap ul.wrap-nav li {
font-size:14px;
text-transform:uppercase;
display:inline-block;
vertical-align:top;
width:70px;
padding:14px;
position:relative;
margin:0 7px;
}

.menu-img{
border-radius:100px;
width:60px
}
.wrap ul.wrap-nav li a {
font-family:"Lato",sans-serif;
font-weight:600;
color:#fff;
display:block;
padding:10px 0;
width:60px;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;

}
.wrap ul.wrap-nav li a:hover {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color:#34B484;
}
.footer-hp{
background-color:#282F20;
width:100%;
height:28px;
position:absolute;
bottom:0;
text-align:center;
font-size:13px;
font-family:"Josefin Sans","Roboto Condensed",sans-serif !important;
color:#fff;
padding:3px;
}
.footer-hp p{
margin:0;
margin-top:2px;
}
.home-h1{
color: #fff !important;
font-size: 50px !important;
font-weight: 500;
margin-top:0px;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.home-h3{
color: #fff !important;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
}
.nivo-lightbox-theme-default .nivo-lightbox-close {
display: block;
text-indent: -9999px;
}
.nivo-lightbox-theme-default a.nivo-lightbox-close::before, .nivo-lightbox-theme-default a.nivo-lightbox-close::after {
background-color: #000;
content: " ";
height: 33px;
left: 15px;
position: absolute;
width: 0px;
}
.btnplayvideo{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
.btnbrochure{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
<div class="overlay" style="display: block;">
	        <div class="wrap">
	
		        <ul class="wrap-nav">
				            <li><img class="menu-img" alt="Home" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/">Home</a>
				            <li><img class="menu-img" alt="Menu 2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"> <a href="/Menu2/">One</a></li>
				            <li><img class="menu-img" alt="Menu 3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu2/">Two</a></li>
                            <li><img class="menu-img" alt="Menu 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu4/">Four</a></li>
                            <li><img class="menu-img" alt="Menu 5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="//">Three</a></li>
			            </ul>

		        </div>
	        </div>

答案 1 :(得分：0)

您只需将display: -ms-flexbox;添加到.wrap类

即可 

*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.70);
overflow:auto;
z-index:9999;
}
body{background-color:green;}
/*.wrap {
color:#fff;
text-align:center;
max-width:100%;
margin:0 auto;
width:100%;
}*/
.wrap {
align-items: center;
color: #fff;
display: flex !important;
display: -ms-flexbox; /* to support IE */
height: 100% !important;
margin: 0 auto;
max-width: 100%;
text-align: center;
width: 100%;
}
/*.wrap ul.wrap-nav {
border-bottom:0px solid #575757;
text-transform:capitalize;
padding:150px 0px 100px;
}*/
.wrap ul.wrap-nav {
border-bottom: 0 solid #575757;
display: table-cell;
height: 170px;
margin: auto !important;
padding: 0;
position: relative !important;
text-transform: capitalize;
}
.wrap ul.wrap-nav li {
font-size:14px;
text-transform:uppercase;
display:inline-block;
vertical-align:top;
width:70px;
padding:14px;
position:relative;
margin:0 7px;
}

.menu-img{
border-radius:100px;
width:60px
}
.wrap ul.wrap-nav li a {
font-family:"Lato",sans-serif;
font-weight:600;
color:#fff;
display:block;
padding:10px 0;
width:60px;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;

}
.wrap ul.wrap-nav li a:hover {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color:#34B484;
}
.footer-hp{
background-color:#282F20;
width:100%;
height:28px;
position:absolute;
bottom:0;
text-align:center;
font-size:13px;
font-family:"Josefin Sans","Roboto Condensed",sans-serif !important;
color:#fff;
padding:3px;
}
.footer-hp p{
margin:0;
margin-top:2px;
}
.home-h1{
color: #fff !important;
font-size: 50px !important;
font-weight: 500;
margin-top:0px;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.home-h3{
color: #fff !important;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
}
.nivo-lightbox-theme-default .nivo-lightbox-close {
display: block;
text-indent: -9999px;
}
.nivo-lightbox-theme-default a.nivo-lightbox-close::before, .nivo-lightbox-theme-default a.nivo-lightbox-close::after {
background-color: #000;
content: " ";
height: 33px;
left: 15px;
position: absolute;
width: 0px;
}
.btnplayvideo{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
.btnbrochure{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
<div class="overlay" style="display: block;">
	        <div class="wrap">
	
		        <ul class="wrap-nav">
				            <li><img class="menu-img" alt="Home" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/">Home</a>
				            <li><img class="menu-img" alt="Menu 2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"> <a href="/Menu2/">One</a></li>
				            <li><img class="menu-img" alt="Menu 3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu2/">Two</a></li>
                            <li><img class="menu-img" alt="Menu 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu4/">Four</a></li>
                            <li><img class="menu-img" alt="Menu 5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="//">Three</a></li>
			            </ul>

		        </div>
	        </div>

相关问题
最新问题