我有以下 css 我想从较小分辨率屏幕上的页面向外扩展
@media screen and (max-width: 1331px) {
.homePageStyle {
transform-origin: 70px 0px;
transform: scale(0.93, 0.93);
}
}
这在 chrome 中完美运行，但在 IE 中它会在页面右侧留下很多填充并显示滚动条
我可以添加什么来阻止滚动条出现并且在 IE 中右侧没有填充
【问题讨论】：
我建议只设置overflow-y: hidden;。滚动条会自动添加填充，overflow-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 和overflow 的区别一般是overflow-y 只改变影响屏幕垂直方向，overflow 影响整个屏幕溢出，overflow-x 明显影响水平部分。我的意思是，如果你知道你的图表，它基本上是 (x,y)，但如果它不在默认视图中，你就不能滚动查看该图的其余部分。
【讨论】：
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
【讨论】：
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*/ }
}
注意：它们是黑客。因此，它们可能会或可能不会起作用。
参考：
【讨论】：