響應在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％）。這解決你的問題:)