天地玄黄，宇宙洪荒。

日月盈昃，辰宿列张。

寒来暑往，秋收冬藏。

闰余成岁，律吕调阳。

云腾致雨，露结为霜。

金生丽水，玉出昆冈。

剑号巨阙，珠称夜光。

果珍李柰，菜重芥姜。

海咸河淡，鳞潜羽翔。

龙师火帝，鸟官人皇。

始制文字，乃服衣裳。

推位让国，有虞陶唐。

吊民伐罪，周发殷汤。

坐朝问道，垂拱平章。

爱育黎首，臣伏戎羌。

遐迩一体，率宾归王。

鸣凤在竹，白驹食场。

化被草木，赖及万方。

盖此身发，四大五常。

恭惟鞠养，岂敢毁伤。

女慕贞洁，男效才良。

知过必改，得能莫忘。

罔谈彼短，靡恃己长。

信使可覆，器欲难量。

墨悲丝染，诗赞羔羊。

景行维贤，克念作圣。

德建名立，形端表正。

空谷传声，虚堂习听。

祸因恶积，福缘善庆。

尺璧非宝，寸阴是竞。

资父事君，曰严与敬。

孝当竭力，忠则尽命。

临深履薄，夙兴温凊。

似兰斯馨，如松之盛。

川流不息，渊澄取映。

容止若思，言辞安定。

笃初诚美，慎终宜令。

荣业所基，籍甚无竟。

学优登仕，摄职从政。

存以甘棠，去而益咏。

乐殊贵贱，礼别尊卑。

上和下睦，夫唱妇随。

外受傅训，入奉母仪。

诸姑伯叔，犹子比儿。

孔怀兄弟，同气连枝。

交友投分，切磨箴规。

仁慈隐恻，造次弗离。

节义廉退，颠沛匪亏。

性静情逸，心动神疲。

守真志满，逐物意移。

坚持雅操，好爵自縻。

都邑华夏，东西二京。

背邙面洛，浮渭据泾。

宫殿盘郁，楼观飞惊。

图写禽兽，画彩仙灵。

丙舍旁启，甲帐对楹。

肆筵设席，鼓瑟吹笙。

升阶纳陛，弁转疑星。

右通广内，左达承明。

既集坟典，亦聚群英。

杜稿钟隶，漆书壁经。

府罗将相，路侠槐卿。

户封八县，家给千兵。

高冠陪辇，驱毂振缨。

世禄侈富，车驾肥轻。

策功茂实，勒碑刻铭。

盘溪伊尹，佐时阿衡。

奄宅曲阜，微旦孰营。

桓公匡合，济弱扶倾。

绮回汉惠，说感武丁。

俊义密勿，多士实宁。

晋楚更霸，赵魏困横。

假途灭虢，践土会盟。

何遵约法，韩弊烦刑。

起翦颇牧，用军最精。

宣威沙漠，驰誉丹青。

九州禹迹，百郡秦并。

岳宗泰岱，禅主云亭。

雁门紫塞，鸡田赤诚。

昆池碣石，钜野洞庭。

旷远绵邈，岩岫杳冥。

治本于农，务兹稼穑。

俶载南亩，我艺黍稷。

税熟贡新，劝赏黜陟。

孟轲敦素，史鱼秉直。

庶几中庸，劳谦谨敕。

聆音察理，鉴貌辨色。

贻厥嘉猷，勉其祗植。

省躬讥诫，宠增抗极。

殆辱近耻，林皋幸即。

两疏见机，解组谁逼。

索居闲处，沉默寂寥。

求古寻论，散虑逍遥。

欣奏累遣，戚谢欢招。

渠荷的历，园莽抽条。

枇杷晚翠，梧桐蚤凋。

陈根委翳，落叶飘摇。

游鹍独运，凌摩绛霄。

耽读玩市，寓目囊箱。

易輶攸畏，属耳垣墙。

具膳餐饭，适口充肠。

饱饫烹宰，饥厌糟糠。

亲戚故旧，老少异粮。

妾御绩纺，侍巾帷房。

纨扇圆洁，银烛炜煌。

昼眠夕寐，蓝笋象床。

弦歌酒宴，接杯举殇。

矫手顿足，悦豫且康。

嫡后嗣续，祭祀烝尝。

稽颡再拜，悚惧恐惶。

笺牒简要，顾答审详。

骸垢想浴，执热愿凉。

驴骡犊特，骇跃超骧。

诛斩贼盗，捕获叛亡。

布射僚丸，嵇琴阮箫。

恬笔伦纸，钧巧任钓。

释纷利俗，并皆佳妙。

毛施淑姿，工颦妍笑。

年矢每催，曦晖朗曜。

璇玑悬斡，晦魄环照。

指薪修祜，永绥吉劭。

矩步引领，俯仰廊庙。

束带矜庄，徘徊瞻眺。

孤陋寡闻，愚蒙等诮。

谓语助者，焉哉乎也。

 

 

作者：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。