suzyvivi/blog

Record the little things for every moment in Issues.

blog's Issues

低版本ie常见兼容性问题汇总

低版本ie常见兼容性问题汇总

因为项目原因不得不与坑爹的ie打交道。顺手就把踩到的坑记了一下吧。

ie6

• 不支持png24图片，所以透明图只能保存为png8 or gif，png8会有很严重的锯齿和杂边，在ps中保存时在【杂边】选项中选择与背景色相近的颜色即可缓解。
• css文件中类名（class）不能连写。

/*ie6中不支持这种写法*/
.classname.classname1{... ...}

• 浮动元素浮动方向与margin方向一致时会出现双倍间距（双边距），给浮动的元素上增加 *display:inline 属性即可。
• 非a标签的hover效果全部失效。
• 空标签定义height属性失效，给里面填充占位文字，然后设置 overflow:hidden; font-size:0; 即可。
• 当子元素有 position:relative 属性，父元素的 overflow:hidden 属性会失效。给父元素也增加 position:relative 属性即可。
• z-index 失效，元素本身不能有浮动，父元素或者祖先元素设置相应的 z-index 属性

iconfont 开发文档

Iconfont项目开发文档

还在为切恼人的icon而头疼吗？还在为各个icon的不同颜色状态而心累吗？iconfont应运而生。已在我们PCW项目中大面积上线使用了。

iconfont优点

• 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少请求，还可以配合HTML5离线存储做性能优化。
• 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
• 兼容性：网页字体支持所有现代浏览器，包括IE低版本。

项目结构

|--src                        // svg图片管理目录
|--gitignore                  //不解释
|--README.md                  //不解释
|--demo.css                   //下方demo页面中的样式，跟iconfont并无关联
|--demo_fontclass.html        //图标示范展示页面（方式1：通过class引用，兼容ie8+）
|--demo_symbol.html           //图标示范展示页面（方式2：通过svg&js引用，兼容ie9+，未来趋势，支持彩色图标）
|--demo_unicode.html          //图标示范展示页面（方式3：通过unicode引用，兼容ie6+，我们项目中采用就是该种方式）
|--iconfont.css               //为方式1生成的样式
|--iconfont.eot               // ie字体文件，已上传cdn
|--iconfont.js                //为方式3生成的js文件
|--iconfont.svg               // ios需要的字体文件，已上传cdn
|--iconfont.ttf               // android需要的字体文件，已上传cdn
|--iconfont.woff              // chrome firefox 字体文件，已上传cdn

• 项目中使用的字体图标均是UDC设计师黄群的作品
• 项目中的字体文件均由第三方阿里图标库生成
• 我司项目中字体图标展示：点我 （若无账号请先注册，需登录才可以访问）
• 项目中字体图标设计规范和上传方式请参考这里
• 如上结构所述，web端会有三种方式引用字体文件，我司使用的是==方式3==，三种方式具体阐述见此

项目中引用方式

@font-face {
    font-family: 'xiu-ico';
    src: url('//static.iqiyi.com/ppsshow/iconfont/iconfont.eot');
    src: url('//static.iqiyi.com/ppsshow/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
    url('//static.iqiyi.com/ppsshow/iconfont/iconfont.woff') format('woff'),
    url('//static.iqiyi.com/ppsshow/iconfont/iconfont.ttf') format('truetype'),
    url('//static.iqiyi.com/ppsshow/iconfont/iconfont.svg#xiu-ico') format('svg');
}
.xiu-ico {
    font-family: "xiu-ico"!important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .2px;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
}

==上述代码已经一站式打包进PCW blank.css中，固可以在pc端任何角落使用字体图标==

使用方法（方式3：unicode法）

<i class="xiu-ico xiu-ico-search">&#xe649;</i>

三步走

1. 引用基础class xiu-ico 。
2. 自定义描述class xiu-ico-search ;(方式3中该自定义类可加可不加，只是便于代码识别)
3. dom结构中插入unicode  (该unicode可在demo_unicode.html 或者 我司阿里图标库中查阅)

坑点前瞻

• 阿里图标库固然好，但是有小bug，设计出好的svg图标上传前，一定要先命好名称，千万不要上传后在阿里图标库里修改svg名称，否则就会出现图标轮廓走形，锯齿等诡异现象。

---

git config

[core]
autocrlf = false
safecrlf = true
[user]
name = ****
email = ****
[diff]
tool = bc4
[difftool]
prompt = false
[difftool "bc4"]
cmd = ""D:/software/Beyond Compare/BCompare.exe" "$LOCAL" "$REMOTE""
[merge]
tool = bc
[mergetool]
prompt = false
keepBackup = false
[mergetool "bc"]
cmd = ""D:/software/Beyond Compare/BCompare.exe" "$LOCAL" "$REMOTE" "$BASE" "$MERGED""

大厂弹框为什么不用mask层包裹里面dialog内容？

大厂弹框为什么不用mask层包裹里面dialog内容？

基于弹框的两种普遍build方法做了调研，如下：

一般方法：

<div class="dialog-mask">
    <div class="dialog-container">...</div>
</div>

大厂方法：

<div class="dialog">
    <div class="dialog-mask"></div>
    <div class="dialog-container">...</div>
</div>

demo

bootstrap：http://v3.bootcss.com/javascript/#modals

wechat-UI：https://weui.io/#dialog

原因(需求，性能)

• 为了模态框重叠（同时显示多个模态框，防止mask叠加造成背景变深）
• 为了交互的需要（属于两部分动画，一般来说，遮罩层透明度渐渐从0增加到1，然后对话框再飞出）
• position fixed对UI重绘来说，开销最大（当然相比来说也还是很小的，但是相比于static来说会多一些），还有就是，那么有遮罩，也不能完全遮罩掉所有的操作，比如滚动..多个遮罩会让UI觉得难以理解（如果某个dialog也需要滚动的话），也就是说垂直滚动大于一个

h5-player项目UI开发文档

h5-player项目UI开发文档

由于adobe flash 要挂了，所以才会有了本次html5播放器光速迭代开发。

项目结构

h5-player
|--playerAPI 
|--playerApp
|--playerSDK
|--playerUI                   // UI相关的开发都在此目录

playerUI里具体说明

dist
|--xiu_media.css              //编译后可以上生产的最终样式
src
|--img                        //图片目录
|--_xiu_media_common.scss     //内部通用类（大布局，全屏，loading，右键菜单）
|--_xiu_media_control.scss    //播控区
|--_xiu_media_danmaku.scss    //弹幕
|--_xiu_media_dialog.scss     //弹框，错误提示
|--_xiu_media_jcrop.scss      //图片裁切组件
|--_xiu_media_kaibo.scss      //开播流程
|--_xiu_media_kaibo_cmd.scss  //开播流程中各种按钮
|--_xiu_media_recommand.scss  //下播后推荐图
|--_xiu_media_reset.scss      //初始化
|--_xiu_media_variate.scss    //自定义变量
|--anchor_end.html            //主播端静态模板
|--user_end.html              //用户端静态模板
|--xiu_media.scss             //*样式配置与拼装
config.rb                     //这不重要（除非你用ruby）

• ==sass编译时默认约定，局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。==
  so，该项目中只会编译 xiu_media.scss 文件。
• UI项目不需要起server，本地直接访问html模板文件即可。
• html模板中许多模块的dom都注释，并做了 display:none 处理

sass编译工具

此项目本着轻量，快速原则，并没有植入自动化流。so着手使用小编译工具--Koala（详见链接）

下载后简单设置

1. 点击左上角 + 浏览添加项目 src 目录，即可在右侧看到 xiu_media.scss 已被添加成功。
2. 右击刚添加成功的 xiu_media.scss ，选择 set output path 浏览并设置为 dist 目录即可。
3. 单击刚添加成功的 xiu_media.scss ，勾选 Auto Compile，Source Map，其余的不勾，并下拉选择 Compressed。 大功告成，可以开发了。

注意事项

• Source Map 有助于开发时debug，迅速定位问题所在的scss文件，最终上线时不用上该文件。
• win版工具，编译生成的css文件是CRLF的，最好用IDE手动转下为LF。（git上，方便你我他，手动微笑）
• 虽说工具是实时编译的，请确保IDE的目录也是实时Sync的。

项目坑点前瞻

• 播放器flash转h5后，原本直播间播放区域上边本身会有一些常驻功能和活动的挂件（例如，热度，红包，pk等），flash时，不存在层级关系，所有挂件都在flash之上，但是h5化后，播放器中部分dom元素是有层级的，so为了不影响外部挂件，请尽量不要为播放器中元素设置高层级。

---

git在不同平台中换行符问题

git在不同平台中换行符问题

背景

在各操作系统下，文本文件所使用的换行符是不一样的。UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是0x0D（CR），后来的 OS X 在更换内核后与 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A（CRLF） 作为换行符。（不知道 Bill Gates 是怎么想的，双向兼容？）
这种不统一确实对跨平台的文件交换带来麻烦。虽然靠谱的文本编辑器和 IDE 都支持这几种换行符，但文件在保存时总要有一个固定的标准啊，比如跨平台协作的项目源码，到底保存为哪种风格的换行符呢？
Git 作为一个源码版本控制系统，以一种（我看起来）有点越俎代庖、自作聪明的态度，对这个问题提供了一个“解决方案”。
Git 由大名鼎鼎的 Linus 开发，最初只可运行于 *nix 系统，因此推荐只将 UNIX 风格的换行符保存入库。但它也考虑到跨平台协作的场景，并且提供了一个“换行符自动转换”功能。
这个功能默认处于“自动模式”，当你在签出文件时，它试图将 UNIX 换行符（LF）替换为 Windows 的换行符（CRLF）；当你在提交文件时，它又试图将 CRLF 替换为 LF。

解决方案

git config --global core.autocrlf false  //提交检出均不转换

git config --global core.safecrlf true  // 拒绝提交包含混合换行符的文件

H5页面适配iPhoneX（CSS篇）

H5页面适配iPhoneX（CSS篇）

iPhoneX，apple新一代旗舰机型。从测评角度看，中肯的说【不值得购买】，因为同一代发布的iPhone8可以实现其90%的功能，万元的高价格确实买了“hello future”的情怀。从开发者角度看，强迫症+死Geek的乔帮主也许会死不瞑目，恶心的“刘海”&“下巴”，再牛b的传感器和摄像头位置真的需要另觅他处；但它无疑是“真”概念旗舰，毕竟开启了apple的全面屏时代。

W：老公，你手机借我用用我逛逛淘宝！
M：好，拿去吧。

（几分钟后。。）

W：老公，你看看这个裙子好不好看？？
M：来，我瞅瞅。

（哔。。。恭喜你，支付成功！）

（手动微笑）言归正传。

理解iOS11中的webview viewport

iOS11带来了一些新特性，对于hybrid app开发者而言，手机状态栏的表现形式改动和home键位的取消，势必会影响webview中一些带有定位属性的header和footer元素表现。下面就以“刘海”为例，说明一些兼容方案，但在此之前先聊一聊iOS的状态栏和安全区概念。

状态栏&安全区

在早期的iOS版本中，状态栏是一条位于屏幕上方很宽的长期存在的不可点击区域，它是系统UI的一部分，所有的app运行在其下方。



从iOS7开始就发生了变化，状态栏变成了透明，并且可以拥有下方app顶部导航栏背景色。如果你使用过Cordova框架（hybrid app中经典框架），你可能需要监听iOS的版本还要给你的header增加20px的偏移量，使你的header完美避开顶部系统状态栏位置。



最新的iOS迭代小版本中，还有一些新特性：譬如下拉app时banner依旧可以展示在状态栏中；来电or有app正在获取你的地理位置信息时，你的状态栏的颜色就会发生变化。

iOS11的变化

iOS11与先前版本的不同之处在于webview中内容元素会按照【安全区】布局。这个意味着如果你有个定位position:fixed;top:0的header元素，它首先会距离屏幕顶端20px初渲染出来，也就是说会有个20px的gap，向下阅读内容，header会上移，自动把gap盖住，然后当你向上返回阅读时，header会下移，露出gap。WTF!



具体效果如下视频所示。

难道apple公司脑子有坑？webview机制如此设计？（黑人脸问号）

iOS11刚发版时，很多开发者都是一脸懵逼，不理解为什么webview布局机制如此诡异，但是如果你看过iPhoneX的设计，你也许会理解，正是有了上边【刘海】，所以才要将webview布局机制进行调整，否则【刘海】会完美的盖住你固定在页面顶部元素。即使这样依旧不是很完美。

iOS11的解决方案

幸运的是iOS的研发团队早有跟W3C标准制定者【串通一气】，所以往往iOS平台上成了一些新标准的试验田。



在h5标准中meta是一个非常重要的标签，本次问题的修复需要应用其中一个属性viewport-fit，该属性有3个对应值：

• contain，可视窗口完全包含网页内容。
• cover，网页内容完全覆盖可视窗口。
• auto，默认值，表现与contain一致。

对于iPhoneX之前的iPhone设备屏幕为规则的矩形，网页内容都可以完整展示；但是对于iPhoneX是异形屏幕，通过viewport-fit可以设置网页内容在可视窗口中的显示规则，通过下图可以辅助理解：

在设置viewport-fit=cover好后，就会发现网页上下左右都会被吃掉一些。然后我们还要引入一个css常量safe-area-inset-*：

• safe-area-inset-top
• safe-area-inset-bottom
• safe-area-inset-left
• safe-area-inset-right

分别表示 Safe area 和可视窗口viewport顶部，右边，左边，底部的间距，可以用于设置margin, padding, 或者绝对定位时left, top。

上面的常量写入css时需要一个函数 constant（）来解析。

header {
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Status bar height on iOS 11.2+ */
    padding-top: env(safe-area-inset-top);
}

注意：viewport-fit 和 safe-area-inset-* 只对于 WKWebView 有效，在 UIWebView 中无效；并且env函数将会写进ios11.2+以上版本标准中，还未正式发布。 所以依旧要采用上下兼容方式hack一下。所以终极兼容刘海儿方案如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<style>
#header {
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Status bar height on iOS 11.2+ */
    padding-top: env(safe-area-inset-top);
}
</style>

以上即为h5页面适配iPhoneX的css所要调整的部分。若有疏漏，还望及时沟通指正。

参考文献

• Understanding the WebView Viewport in iOS 11
• css-tricks-for-iPhoneX

---