響應式IE11

Question

您好我的CSS代碼在所有瀏覽器中均能正常工作，但是在Internet Explorer 11中可以進行水平滾動，但是如果我從.portfolio .heading ul刪除width：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％。 如果要同時具有這兩個屬性，請使用width：calc（100％-50％）。 這可以解決您的問題:)