前端技术文档

IOS兼容

日期格式问题,不识别 yyyy-MM-dd

safari,IOS下iframe宽高度被内容撑出设备高度

这是一个safari浏览器存在的缺陷，无论如何设置iframe的宽高，都会被内容的宽高撑大，这会导致页面变得很大。解决方案 1. 设置iframe scrolling="0"属性 2. 使用overflow:scroll的div包裹iframe 3. 设置iframe内页面的body position:fixed

方案一 解决宽度：

#iframe{
width:1px;
min-width: 100%;
*width:100%;
}
<iframe src="" scrolling="no">
解决高度：

#iframe{
height:1px;
min-height: 100%;
*height:100%;
}
<iframe src="" scrolling="no">

PS： 使用了此方法，iframe将无法滑动，如果是在height和width都不需要滑动的情况，此方法值得一试方案二

<style>.scroll-box {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

.scroll-box iframe {
height: 100%;
width: 100%;
}
</style>

<html><body>
<div class="scroll-box">
<iframe src="" />
</div></body></html>

ps:使用了此方法在safari下，iframe的高度和宽度依然会被撑大，只是因为加了外层包裹，防止iframe影响到父窗口的页面布局。 需要注意的是——因为iframe的宽高依旧被撑大了，导致iframe内position:fixed的元素的位置与预期的不同，比如在iframe宽高都大于浏览器窗口宽高时，垂直水平居中的fixed元素将不再居中，而是往右下方偏移

方案三

#iframe{ width: 100%;
height:100%;
}

<iframe id="iframe" src=""></iframe>

/********iframe内的页面********/

html{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body{
position: fixed;
top:0;
left:0;
width:100%;
height: 100%;
overflow: scroll;
}

PS：此方法通过限制iframe窗口内html的宽高，从而解决iframe被html撑大的问题，在可以操作iframe页面的情况下，使用此方法能解决宽高溢出问题。但是也有缺陷，滑动在safari下的体验很差。 解决滑动体验： 在body增加-webkit-overflow-scrolling:touch;,这样滑动就流畅了，但是，会出现橡皮筋效果，而为了解决橡皮筋效果，还需要做进一步的处理，可参考：https://segmentfault.com/a/1190000016352028

safari 下 inline-block 不对齐问题

safari 浏览器 对于 inline-block 没有默认的vertical-align 样式，今天项目遇到鼠标放在inline-block上面的时候元素突然不对齐的现象；

Alt 布局错乱图片

解决办法:
设置vertical-align:top