Tag
标签：CSS
14 篇
safari 10 下 rem 失效问题
上个月苹果更新的系统版本，包括 iOS 10 和 MacOS，伴随更新的还有新的 safari。 新版本上来必然会多多少少存在一些坑。还好上个月有段时间在休假，并没有踩到坑。 但是，就在昨天，终于被我踩到了。。。。 大概是这样的： 公司的项目会使用 rem 来做不同屏幕的适配，然后昨天做完一个页面以后，发现在 chrome 下调试没有任何问题，自己的安卓手机也没有问题，但是到了 iphone 上就…
safari 下旋转动画的迷之 bug
前几天在写一个活动页的时候发现一个你一样问题，先还原一下现场 页面中有一个地方要做一个一直旋转的动画，类似转盘的效果，很简单是不是？是的！ 简洁明了，有木有，还带 3D 加速，完美是不是？ 然而。。。 为什么 safari 下并不动。。。。 = =!，老夫可是最新的 safari 9.1.1 呀！ 额，这就尴尬了 请教一下同事，然后试着改成了这样 然后，诶 转了！ 等等！！！ 为什么转的姿势这么奇…
手机下 marquee 滚动长度问题
小问题，简单记一下 今天用 marquee 标签做滚动的时候，在 Chrome 下看效果没有问题，但是后来发现在手机微信上，每当内容滚动过 marquee 宽度的距离以后，就会重置重新从头滚动，这一点让我着实蛋疼了一下。。。。 然后后来排查的时候发现，是因为我在样式里给 marquee 设置了宽度（因为不想整个屏幕宽度滚动，所以就设置了一下宽度），然后就出现了问题，这个宽度被继承到 marquee…
sass 中使用 calc 传入变量无效
是的，我又用上 sass 了，新公司在用，所以就又写 sass 了。 然后今天遇到的小问题，随手记一下 当我们用 sass 写如下代码的时候 嗯嗯，看上去好像很正常。。。 错！！ 编译完了之后，你会发现这段代码是这样的 然后浏览器就无情的忽略掉这一行谜一样的样式了 这尼玛是什么呀？！ 摔！ 好吧，看样子 sass 在编译的时候，把括号里面的变量当做字符串处理了。 所以我们该怎么办呢？ 哈哈哈，对！…
LESS中给mixin传递代码块
说到less是好久以前就用过了，因为语法很简单，很容易上手，能很方便的提高书写css的效率，自己玩儿的也是飞起。直到那一次为了写动画，出现了一个问题： 因为用到很多keyframes，所以就要写大量的重复的前缀做兼容。当时自己尚年少，还木有接触到前端自动化的各大神器，所以当时想到的就是自己写个mixin来做这些事情呗。然后纠结着写了一上午，愣是写不出一个可以方便使用的mixin，简直沮丧。 然后翻…
关于requestAnimationFrame
好久没更新技术文章了，这次更新还是有点儿水。。。 没事儿，水惯了就好了，哈哈 这次这个货呢主要是最近在写一个比较好玩儿的东西，在做动画的主程序循环的时候，想起了这货 -- requestAnimationFrame， HTML5的新增函数，主要在于提高动画的执行效率，尤其是canvas和svg这种的。用起来很赞，但是兼容性嘛。。。。 呵呵。。。 so 这次我主要是记一下这货的兼容写法（终于进入正题…
CSS调整页面灰度
很好，这篇主要是mark用，方便以后再翻阅 首先是用到CSS的filter属性，最开始貌似是IE4开始加的私有属性，可以实现透明、模糊、阴影、发光、灰度等效果，代码是长这样式儿的： filter: gray / IE6 - IE9 / 再后来IE10就开始抛弃这个属性了，但是CSS3借鉴了这个做法，标准的CSS Filter方案里面可以支持grayscale灰度、sepia褐色、saturate饱…
关于overflow:hidden和zoom:1清除浮动的认识
一直以来浮动就是做css里面很让人蛋疼的问题，所以，我一直是很小心的使用着它，生怕这货会给我惹出点儿事端来。。。 而经过一段时间的使用，也发现了一些比较好的驾驭浮动的方法，最常见的便是clear:both。。。这个就不多说了，一般人都懂得。 最近才得知overflow和zoom能清除浮动，所以果…
IE6下支持png透明的写法
话说png是个好东西，但是一般好东西IE6都不支持（万恶的IE6啊） 在IE6下用透明的png时会有一个灰色的背景，很难看（还好，IE7就已经开始支持png的透明了） 那么我们怎么样才能让万恶的IE6支持png透明的，下面我们来看个例子 &n…
对于position属性值absolute和relative的一点小测试
在开始小测试之前先来看看这两个属性值的定义： CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内…