随笔分类 - CSS+JS
摘要：闲话少说，最近遇到一个页面上需要排列个数不等的按钮，且每个按钮的文字长度不一，这样一个有点棘手的需求。前台设计要求该按钮必须是圆角且带有立体感效果，但是由于按钮文字长短不一，若使用背景图片制作按钮会存在难以处理的情况（按钮背景是png图片，半透明效果，使用叠加法会使得按钮半透明部分叠在一起变得丑陋不堪），最后不得不想办法使用纯CSS来模拟这样一个按钮，经过多次试验，终于拿出来一个解决方案。截图在这里：要做这样一个东西，显然必须满足兼容性这一基本要求，而且尽量不要使用CSS Hack，幸运的是，我这种模拟刚好实现了以上要求。代码如下：<!DOCTYPE html PUBLIC "
阅读全文
posted @ 2011-10-25 21:18
摘要：一直以来挺喜欢用Chrome的，速度快，界面简洁，比较友好，Safari由于也是Webkit内核，因此有着跟Chrome类似的表现，但是他们也有好心办坏事的时候，比如对文本框和文本域的处理，首先会自动加上黄色的高亮边框显示，然后对于文本域右下角会多出一个手动缩放尺寸的功能，这种“人性化”处理，一般情况下是很不错的，但是对于前端开发来讲，有时候反而成了问题，比如你想精准控制文本框文本域的外观样式和状态，那么Webkit这些处理反而成了败笔，怎么去掉这些呢？其实挺简单：1、高亮外框的取消input {outline: none;}textarea {outline: none;}如上，使用CSS的
阅读全文
posted @ 2011-10-09 13:35
摘要：浏览器同样存在不同程度的Bug，不同浏览器在对同一个页面缩放时渲染效果会出现差异，而这种差异会严重影响到智能手机（iPhone、Android）上的视觉效果，本文将通过一个真实案例分析并解决上述问题。
阅读全文
posted @ 2011-07-25 11:03
摘要：iPhone上的safari mobile和android自带的浏览器都是基于webkit内核的。这两天想到网站需要一个针对智能手机分辨率的版本，于是开始研究相关的资料。前面两篇文章写到了如何通过userAgent来判断设备类型和浏览器内核，通过这些足够判断出哪些是iphone或者android浏览器了，但是即便同种设备浏览器也存在分辨率不同的问题，这个该如何处理呢？首先想到的就是用js检测（screen.width*screen.height），事实证明有问题：1、iphone4上的safari mobile结果竟然是320*480！要是前3代也就正常了，可iphone4明明是640*960
阅读全文
posted @ 2011-07-22 17:09
|
||
