上周三蹲在电脑前改公司官网首页，结果被CSS3坑得够呛。本来想搞个酷炫的响应式布局，浏览器一缩放手一抖，图片直接撑破div妈都不认识。气得我差点把键盘砸了！

盒模型把我整破防了

凌晨两点改登录框尺寸，width明明设了300px，死活比旁边按钮宽一截。抓着头髮查了半天，才发现是border和padding在作妖。赶紧抄起计算器摁：总宽度=width+左右padding+左右border。第二天直接给所有元素加上：

• box-sizing: border-box

这下子总算能安心喝口冰可乐了。

浮动塌陷差点让我删库

给产品列表排三栏布局，float用得飞起。结果footer突然窜到列表中间，跟窜天猴似的！原来父容器没清除浮动。赶紧在父级div屁股后塞了个：

• div::after {content:""; display:block; clear:both}

看着规规矩矩的底栏，这才敢关电脑睡觉。

移动端适配逼疯产品经理

测试小哥举着iPhone哇哇叫："按钮点不到！"凑过去一看，触控区域比蚂蚁还小。原来偷懒用font-size做按钮尺寸，手机屏上就剩个芝麻点。马上掏出：

• min-width: 44px
• min-height: 44px

手指头粗的同事终于闭嘴了。

渐变背景引发血案

老板非要搞彩虹渐变色背景，写了个linear-gradient美滋滋上綫。结果Safari用户全变纯蓝底，客户投诉电话被打爆。手忙脚乱查文档，发现得加：

• -webkit-linear-gradient

现在改代码前都开着五个浏览器同步测，怂得跟鹌鹑似的。

动画卡成PPT

给轮播图加transform旋转，老电脑直接卡成连环画。抱着主机跑技术部求助，前辈指着鼻子骂："transform: translateZ(0)学过没？"硬着头皮给动画元素加上：

• will-change: transform
• transform: translateZ(0)

现在动画丝滑得能溜冰。

z-index叠罗汉翻车

弹窗死活被导航栏压着，z-index调到9999都没用。气得把键盘拍得啪啪响，发现父元素设了：

• opacity: 0.99

这玩意儿居然会新建图层！改成rgba调透明度才解决，加班费又泡汤了。

伪元素坑死交互

设计了个超美的按钮阴影，用::after画了个光圈。结果用户投诉点按钮没反应，原来光顾着好看忘了加：

• pointer-events: none

现在看见伪元素就跟看见债主似的，第一件事就是屏蔽点击事件。

搞CSS3跟谈恋爱似的，天天斗智斗勇。这些坑踩完总算悟了：浏览器开发商才是真爸爸，咱码农就乖乖多测试多查文档！