html - 在 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%;
}