由于某种原因,我在移动 safari 中的弹出窗口中有一个 iframe,一旦加载 iframe,它就会改变 iframe 的大小以超出屏幕尺寸,无论我在检查器中做什么,计算出的样式都不会更新。
inspector 显示的样式正在生效(并且在其他任何地方都有效,包括 android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
但是,在移动 safari 中,“计算高度”和“计算宽度”相差甚远(取决于您启动的弹出窗口),它们高达 3000 像素高和 700 像素宽。 Inspector 没有划掉 height: 900px
或 max-height: 90%
即使我把 style="width: 300px !important; height : 300px !important"
直接在 iframe 标记上计算的值仍然超过这些值,但没有说明原因。
有什么线索吗?
点击任何校园游览链接(正如我所说,它在任何地方都按预期工作,但移动 safari - 甚至是 android) http://www.georgiancollege.ca/new-campus-tours/
最佳答案
在我的一个元素中,Safari 计算规则与样式规则不匹配。并且,您甚至将 !important 直接添加到内联样式也无济于事。
罪魁祸首原来是页面上的过渡效果太多。过渡是在输入和文本区域上(我们用 JS 进行了很多操作)。改变这个帮助了我。
transition: none;
关于ios - 为什么移动 safari 中的计算样式与规则样式不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26913407/