响应在IE11

Question

你好我的CSS代码是在所有的浏览器，但在Internet Explorer 11的工作以及有水平滚动，但如果我删除宽度：从.portfolio .heading UL水平滚动将消失100％：

这里我的代码：

.portfolio { 
 
    width: 100%; 
 
} 
 
.portfolio .heading { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
} 
 
h2.background { 
 
    font-size: 80px; 
 
    font-weight: 800; 
 
    letter-spacing: 8px; 
 
    color: #e8e8e8; 
 
    text-align: center; 
 
    position: relative; 
 
    margin: 0 0 60px; 
 
} 
 
.portfolio .heading ul { 
 
    width:100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%); 
 
    -o-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 
.portfolio .heading ul a { 
 
    font-size: 14px; 
 
    font-weight: 800; 
 
    color: #000000; 
 
    letter-spacing: 6px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <section id="portfolio" class="portfolio text-center"> 
 
     <div class="container"> 
 
      <div class="heading"> 
 
       <h2 class="background">portfolio</h2> 
 
       <ul class="portfolio-sorting list-inline text-center"> 
 
        <li><a href="#" data-group="all" class="active">All</a></li> 
 
        <li><a href="#" data-group="design">design</a></li> 
 
        <li><a href="#" data-group="graphic">graphic</a></li> 
 
        <li><a href="#" data-group="coding">coding</a></li> 
 
       </ul> <!--end portfolio sorting --> 
 
      </div> 
 
     </div> <!-- end container--> 
 
    </section>

注：请在IE11上运行的代码片段的全屏

Answer 1

请CSS代码是这样，它会在任何浏览器中工作：

.portfolio .heading ul { 
     width:100%; 
     position: absolute; 
     top: 50%; 
} 

Answer 2

问题是宽度：100％，剩下50％，其中意味着150％。 如果你想拥有两个属性，使用宽度：calc（100％ - 50％）。这解决你的问题:)