Question

我的iFrame并非以移动设备为中心。我必须将宽度定义为1250px，否则它只显示桌面上iFrame的一小部分。我真的需要在移动设备上将黑色边缘移出屏幕......

http://www.howlatthemoon.com/birthday-parties-chicago

（我必须使用iFrame，因为我的CMS已经过时了，它不适用于此代码。我只是隐藏我边缘的黑色渐变，但CMS不响应媒体查询）

iframe, object, embed {
 max-width: 100%;
}

#midslide {
    clear:right;
margin-top: -47px;
position: relative;
overflow: auto;
margin-left: auto !important;
margin-right: auto !important;
width:1250px;
height:338px;
}


.center{
margin-left: auto;
margin-right: auto;
display: block;
width: 100%; 
}



<iframe scrolling="no" frameborder="0" id="midslide" align="middle" src="http://www.howlatthemoon.com/images/howl/landing/birthday-parties/slider2.html"></iframe>

感谢任何可以提供帮助的人！

Answer 1

尝试这个

#midslide {
    clear: right;
    height: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -47px;
    overflow: auto;
    position: relative;
    width: 100%;
}

Answer 2

你的问题不是css，它是你的左/右黑色渐变图像。左边的一个是特定的，它将所有滑块向右推，所以无论你在css中做什么，你仍然会得到一个左黑色的蒙版图像。这有什么不对，我可以看到为什么你需要为桌面访问者提供这个，但你可以更好地做到这一点，而不是将它们包含在你的内联HTML代码中，你可以设置左/右填充/边框到滑块div。即使你确实希望像现在这样嵌入它们，也要正确行事。显然左图是在滑块之外，而右图是在里面。那就是你遇到的问题好笑的男人，希望这会有所帮助。

iframe不会以移动设备为中心？

2 个答案: