定位居中用transform:translate导致浏览器出现滚动条

Question

<style>
  div {    width: 95vw ;    height: 200px;    background-color: red;    position: absolute;    left:50%;    transform: translateX(-50%);
  }</style><div></div>

在ie的时候会因为width过长而出现横向滚动条，该怎么处理这个滚动条

Answer 1

如果你只是通过absolute想来局中的话..你甚至可以不用transform:.class {    position: absolute;    left: 0;    right: 0;    width: 95vw;    margin: auto; }让absolute + margin分配剩余空间, 这个方法需要设置宽高.

Answer 2

出现滚动条的可能性只有低版本的ie不识别css3，如果要兼容最好的办法还是用过margin-left:-47vw;但是问题又来了，vw也可能不能正确识别……