Question

我有以下css，我想从较小分辨率屏幕上的页面向外扩展

    @media screen and (max-width: 1331px) {
    .homePageStyle {
        transform-origin: 70px 0px;
        transform: scale(0.93, 0.93); 
    }
}

这在chrome中非常有效，但在IE中，它在页面的右侧留下了很多填充并显示了一个滚动条

我可以添加任何内容来阻止滚动条出现并在IE中右侧没有填充

Answer 1

IE有很多问题。因此，您可以做两件事。首先针对IE特定浏览器，然后使用浏览器厂商前缀。

对于IE 10+，您可以使用以下代码

@media screen and (max-width: 1331px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* Affects IE10+ only*/
  .homePageStyle {
       -ms-transform-origin: 70px 0px;
       -ms-transform: scale(0.93, 0.93); 
       padding-right:0; /*see if it do the magic else ignore */
       overflow:hidden;
   }

 }

对于IE 9及更低版本，您可以使用条件评论

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie-9andbelowonly.css" />
<![endif]-->

你也可以使用一些黑客

对于IE 6,7和8

@media \0screen\,screen\9 {
    selector{ /*css rules*/ }
}

对于IE 8

@media \0screen{
    selector{ /*css rules*/ }
}

对于IE 8

@media screen\0{
    selector{ /*css rules*/ }
}

注意：它们是黑客。因此，他们可能会或可能不会工作。

参考：

Moving IE specific CSS into media blocks

How To Create an IE-Only Stylesheet

Answer 2

IE历史上一直存在transform属性的问题。我不知道你使用的是什么版本，但IE11支持这些属性。

如果您使用的是早期版本，请尝试-ms-transform：

@media screen and (max-width: 1331px) {
.homePageStyle {
    -ms-transform-origin: 70px 0px;
    -ms-transform: scale(0.93, 0.93);
    transform-origin: 70px 0px;
    transform: scale(0.93, 0.93); 
}
}

作为一个注释，如果合适的话，你可以用CSS隐藏溢出的内容（很可能不是在你的场景中，但是在给出任何结论之前我还需要更多的信息）：

@media screen and (max-width: 1331px) {
.homePageStyle {
    transform-origin: 70px 0px;
    transform: scale(0.93, 0.93); 
    overflow: hidden;
}
}

如果你有什么我可以看的东西，我很乐意提供进一步的支持。

以下帖子也可能有所帮助，至少可以解释为什么会出现这样的问题：IE showing horizontal scrollbar after dom element transformed

Answer 3

我建议您只设置overflow-y: hidden;。滚动条自动添加填充，溢出y只是整体摆脱它。请注意，如果您拥有屏幕尺寸并且所有媒体属性都已正确配置，则不应该删除任何内容。

你的代码：

    @media screen and (max-width: 1331px) {
    .homePageStyle {
        transform-origin: 70px 0px;
        transform: scale(0.93, 0.93); 
        overflow-y: hidden;
    }
}

overflow-y和overflow-x之间的区别和溢出一般是溢出-y只有更改会对屏幕垂直产生影响，而溢出会影响整个屏幕溢出，而overflow-x显然会影响水平部分。我的意思是，如果你知道你的图表，它基本上是（x，y），但如果它超出默认视图，你就不能滚动查看该图的剩余部分。 / p>

Css和媒体查询

3 个答案: