IE浏览器显示dom元素转换后的水平滚动条 [英] IE showing horizontal scrollbar after dom element transformed

问题描述

我在我的网站的各个地方使用了以下css：

http://jsfiddle.net/uycq29mt/1/

  .a {
位置：绝对; 
背景：红色; 
 width：600px; 
 height：100px; 
剩下：50％; 
 transform：translate（-50％）; 
} 
  

在Internet Explorer中运行时，您会注意到一个水平滚动条，忽略关于页面总宽度的变换。

解决方案

有一个简单的解决方案：

http://jsfiddle.net/uycq29mt/2/

  .a {
 position：absolute; 
背景：红色; 
 width：600px; 
 height：100px; 
右：50％; 
 transform：translate（50％）; 
} 
  

不是将元素左移50％（向右），而是使用变换发送它，我做的是完全相反。
我从来没有考虑过它，直到现在，但是如果你将一个元素置于最左边，它不会影响页面宽度或滚动条。

奇怪的是，如果你做垂直等同于居中，通过使用顶部50％和翻译（0px，-50％）它似乎不会影响垂直滚动条。

它只有在以这种方式使用转换时，Internet Explorer才会重新计算水平边界。很烦人。 IE很烂。

I've used the following css in various places on my site:

http://jsfiddle.net/uycq29mt/1/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    left:50%;
    transform: translate(-50%);
}

When run in internet explorer, you'll notice a horizontal scrollbar that appears to ignore the transform regarding the total width of the page.

解决方案

There is a simple solution:

http://jsfiddle.net/uycq29mt/2/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    right:50%;
    transform: translate(50%);
}

Instead of sending the element left 50% (rightwards) and using a transform to send it left, I do the exact opposite. I never considered it until now but if you position an element to the extreme left, it won't affect the page width or the scrollbar.

Strangely, if you do the vertical equivalent of centering, by using top 50% and translate(0px, -50%) it does not appear to affect the vertical scroll bar.

It appears only Internet Explorer doesn't recalculate horizontal boundaries when transforms are used in this way. Pretty annoying. IE sucks.

这篇关于IE浏览器显示dom元素转换后的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！