Question

您好我的CSS代码在所有浏览器中运行良好但在Internet Explorer 11中有水平滚动但如果我从.portfolio删除宽度：100％.heading ul水平滚动将消失：

这是我的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

注意：请在IE11全屏运行代码段

Answer 1

请像这样的Css代码，它可以在任何浏览器中使用：

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

Answer 2

问题是宽度：100％和左：50％，这意味着150％。如果你想同时拥有这两个属性，请使用width：calc（100％ - 50％）。这解决了你的问题：）

在IE11中响应

2 个答案: