CSS和媒体查询

，我有以下的CSS，我想从一个网页向外扩展在较小的屏幕分辨率CSS和媒体查询

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

这工作完全在铬，但在IE它留下的填充好位上在页面的右侧，并显示一个滚动条

请问有什么可以添加到这个停止滚动条出现，并有右侧没有填充在IE

来源

2017-02-10 Damien

您正在使用哪个版本的IE？ – geeksal

检查我的更新回答 – geeksal

我们正在使用IE 11 – Damien

我建议你只需设置overflow-y: hidden;。滚动条自动添加填充，溢出-y只是整体摆脱它。请注意，如果屏幕尺寸和媒体属性均正确配置，则不应切断任何东西。

您的代码：

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

溢出-y和溢出-x和溢出一般是溢出-Y仅变化之间的差异会影响在屏幕上垂直，而溢出影响屏幕溢出作为一个整体，并溢出-x明显影响水平部分。我的意思是，如果你知道你的图形，它基本上是（x，y），但如果它不在默认视图中，你不能滚动查看该图形的剩余部分。

来源

2017-02-14 01:12:59

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

来源

2017-02-10 14:50:16 geeksal

刚刚尝试过溢出：隐藏，但不幸的是它有相同的问题，它没有解决它 – Damien

@Damien这是否解决您的第一个问题有关填充。 – geeksal

它不抱歉，我试过你提到的，它并没有解决问题 – Damien

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

来源

2017-02-10 15:02:46

我们正在使用IE 11.只是尝试了这些选项，但不幸的是没有喜悦。此外，这是在一个内部公司内部网站上，我没有什么可以分享 – Damien

你可以分享一个最小的例子，重现问题，没有必要张贴整个页面 – vals

CSS和媒体查询

回答

相关问题