岂曰无衣与子同袍

天地玄黄，宇宙洪荒。

日月盈昃，辰宿列张。

寒来暑往，秋收冬藏。

闰余成岁，律吕调阳。

云腾致雨，露结为霜。

金生丽水，玉出昆冈。

剑号巨阙，珠称夜光。

果珍李柰，菜重芥姜。

海咸河淡，鳞潜羽翔。

龙师火帝，鸟官人皇。

始制文字，乃服衣裳。

推位让国，有虞陶唐。

吊民伐罪，周发殷汤。

坐朝问道，垂拱平章。

爱育黎首，臣伏戎羌。

遐迩一体，率宾归王。

鸣凤在竹，白驹食场。

化被草木，赖及万方。

盖此身发，四大五常。

恭惟鞠养，岂敢毁伤。

女慕贞洁，男效才良。

知过必改，得能莫忘。

罔谈彼短，靡恃己长。

信使可覆，器欲难量。

墨悲丝染，诗赞羔羊。

景行维贤，克念作圣。

德建名立，形端表正。

空谷传声，虚堂习听。

祸因恶积，福缘善庆。

尺璧非宝，寸阴是竞。

资父事君，曰严与敬。

孝当竭力，忠则尽命。

临深履薄，夙兴温凊。

似兰斯馨，如松之盛。

川流不息，渊澄取映。

容止若思，言辞安定。

笃初诚美，慎终宜令。

荣业所基，籍甚无竟。

学优登仕，摄职从政。

存以甘棠，去而益咏。

乐殊贵贱，礼别尊卑。

上和下睦，夫唱妇随。

外受傅训，入奉母仪。

诸姑伯叔，犹子比儿。

孔怀兄弟，同气连枝。

交友投分，切磨箴规。

仁慈隐恻，造次弗离。

节义廉退，颠沛匪亏。

性静情逸，心动神疲。

守真志满，逐物意移。

坚持雅操，好爵自縻。

都邑华夏，东西二京。

背邙面洛，浮渭据泾。

宫殿盘郁，楼观飞惊。

图写禽兽，画彩仙灵。

丙舍旁启，甲帐对楹。

肆筵设席，鼓瑟吹笙。

升阶纳陛，弁转疑星。

右通广内，左达承明。

既集坟典，亦聚群英。

杜稿钟隶，漆书壁经。

府罗将相，路侠槐卿。

户封八县，家给千兵。

高冠陪辇，驱毂振缨。

世禄侈富，车驾肥轻。

策功茂实，勒碑刻铭。

盘溪伊尹，佐时阿衡。

奄宅曲阜，微旦孰营。

桓公匡合，济弱扶倾。

绮回汉惠，说感武丁。

俊义密勿，多士实宁。

晋楚更霸，赵魏困横。

假途灭虢，践土会盟。

何遵约法，韩弊烦刑。

起翦颇牧，用军最精。

宣威沙漠，驰誉丹青。

九州禹迹，百郡秦并。

岳宗泰岱，禅主云亭。

雁门紫塞，鸡田赤诚。

昆池碣石，钜野洞庭。

旷远绵邈，岩岫杳冥。

治本于农，务兹稼穑。

俶载南亩，我艺黍稷。

税熟贡新，劝赏黜陟。

孟轲敦素，史鱼秉直。

庶几中庸，劳谦谨敕。

聆音察理，鉴貌辨色。

贻厥嘉猷，勉其祗植。

省躬讥诫，宠增抗极。

殆辱近耻，林皋幸即。

两疏见机，解组谁逼。

索居闲处，沉默寂寥。

求古寻论，散虑逍遥。

欣奏累遣，戚谢欢招。

渠荷的历，园莽抽条。

枇杷晚翠，梧桐蚤凋。

陈根委翳，落叶飘摇。

游鹍独运，凌摩绛霄。

耽读玩市，寓目囊箱。

易輶攸畏，属耳垣墙。

具膳餐饭，适口充肠。

饱饫烹宰，饥厌糟糠。

亲戚故旧，老少异粮。

妾御绩纺，侍巾帷房。

纨扇圆洁，银烛炜煌。

昼眠夕寐，蓝笋象床。

弦歌酒宴，接杯举殇。

矫手顿足，悦豫且康。

嫡后嗣续，祭祀烝尝。

稽颡再拜，悚惧恐惶。

笺牒简要，顾答审详。

骸垢想浴，执热愿凉。

驴骡犊特，骇跃超骧。

诛斩贼盗，捕获叛亡。

布射僚丸，嵇琴阮箫。

恬笔伦纸，钧巧任钓。

释纷利俗，并皆佳妙。

毛施淑姿，工颦妍笑。

年矢每催，曦晖朗曜。

璇玑悬斡，晦魄环照。

指薪修祜，永绥吉劭。

矩步引领，俯仰廊庙。

束带矜庄，徘徊瞻眺。

孤陋寡闻，愚蒙等诮。

谓语助者，焉哉乎也。

 

 

作者：LeuisKen

https://segmentfault.com/n/1330000011368344

iOS Safari

Safari下使用border-image，不能设置border-color: transparent。

使用<meta name="format-detection" content="telephone=no" />解决连续数字误识别为电话号码导致样式出错的问题。

Safari的iframe会自动去适应内容大小而无视CSS中设置的width，该特性只能通过scrolling="no"属性关闭，并通过设置如下CSS样式设置width：width: 1px; min-width: 100%;;但是设置scrolling="no"会导致安卓下iframe无法滑动，目前只能通过UA设备判断解决。

Safari 10以下的flex布局不认width和flex-basis，但是会认min-width，详见Can I Use 中 flex 的 Known issue第一条。

在 Safari 中，setTimeout 无法触发 focus 事件，且不支持 autofocus 属性。可以使用Promise.resolve().then()来执行需要异步的 focus 代码。

iOS 10 safari 会无视meta user-scalable=no，需要用e.preventDefault来解决。个人解决方案mobile-polyfill/ios10-user-scalable-no.js。建议结合ua-parser-js使用，因为iOS 10+的其他浏览器（QQ、UC）等都还是尊敬这个东西的。

Safari下开无痕浏览模式，操作localStorage会直接报错，需要try catch。

某同学用unescape解析encodeURIComponent编码的信息，掉进了乱码的坑。

type=search有坑。

position:fixed有坑。

部分版本的padStart/padEnd实现有bug，会出现null

http://www.joycesong.com/arch…
ios版本：11.1-11.3
使用swiper或者transform属性时，有一定概率出现transform的元素以外的所有 
元素都消失，上下滑动一下页面又出现了。
给外层元素加一个overflow:hidden属性即可解决。

当使用-webkit-overflow-scrolling: touch;时，同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况，需要使用如下方案解决，参考：https://stackoverflow.com/que…

Andriod

针对部分浏览器非预期的缓存机制，需要服务端添加如下HTTP头信息：

部分机型touchmove事件不连续触发

Android的事件每次都要经过浏览器内核再发往UI线程，为了提高效率，如果浏览器内核中没有设置preventDefault，Android就认为该页面元素不需要touchmove事件，于是下次的事件就不经过内核，直接发往UI线程，于是js中就捕获不到touchmove事件。
解决方案：在事件响应的地方设置preventDefault，这样就可以源源不绝地接收到touch事件，比如在touchstart事件中执行e.preventDefault()，touchmove事件就会连续触发。但是这种做法会取消掉浏览器其他的默认行为，比如页面默认的滚动。。。

字号小于12px，或字号不是偶数，部分机型文字无法居中的问题
解决方案：使用transform: scale(0.5)进行缩放 or 字号大一点

scroll 相关方法兼容问题
CSSOM 视图模型新增了一些 scroll 相关的方法，参考：https://drafts.csswg.org/csso…
polyfill：https://github.com/iamdustan/…

综合问题

禁止页面滑动

当你需要禁止移动端页面滑动的时候，在iOS下，需要禁止页面中的touchmove事件，在安卓下，需要给html, body元素加上如下CSS：height:100%;overflow:hidden;。

推荐使用以下代码进行处理：

 

css.sm-no-scroll {
    height: 100%;
    overflow: hidden;
}

但由于禁掉了touchmove事件，导致iOS下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分，通过e.stopPropagation保留原有滚动效果，并针对回弹动画的交互，建议使用如下代码声明一个可滚动区域：

/* 以下属性添加到滚动容器上 */
-webkit-overflow-scrolling: touch;
overflow: auto;

被屏蔽的 class

有些浏览器或者插件会通过DOM元素的class来识别是否为广告，并隐藏或者直接删除DOM。

• mask

• banner

• fixed

• sticky

点透

移动端的 click 触发顺序是touchstart->touchmove->touchend->mousedown->mousemove->mouseenter->click。

在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。

解决方案：fastclick or point-event:none。