浏览器兼容性问题解决方案

2017-09-04 16:19:00

普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充,本帖也会不断更新。 Normalize.css 不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异。当然,你也可以定制属于自己业务的 reset.css <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"> 简单粗暴法 * { margin: 0; padding: 0; } html5shiv.js 解决 ie9 以下浏览器对 html5 新增标签不识别的问题。 <!--[if lt IE 9]> <script type="text/javascript...

阅读全文

网站优化 - 雅虎34条军规

2017-08-31 17:23:09

 雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像)。 1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery Network 利用CDN技术CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。 3.Add an Expires or a Cache-C...

阅读全文

移动前端的HTML5 head 标签大全

2016-11-17 14:55:00

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些...

阅读全文

html5+jquery选择产品属性框

2016-03-17 17:39:00

html5+jquery选择产品属性框,原理:实际上是在label下隐藏了一组randio单选按钮<script> $(function(){ $('.sel-type :first-child').css({'background-color':'#FF9900','color':'#fff'}); $('.sel-type :radio:first').attr('checked','checked'); $('.sel-type :input').hide(); $('.sel-type a').click(function(){ $('.sel-type a').css({'background-color':'#fff','color':'#333'}); $(this).css({'background-color':'#FF9900','color':'#fff'}); }); }); </script> <style> .sel-type a{margin: 10px;padding: 5px;height: 25px;width: 115px;border:1px solid gray; color: #3...

阅读全文

html5表单验证替代JS

2016-02-23 17:46:00

如下栗子:<input type="tel" title="手机号码正确格式,如:13212345678" pattern="^[1][3456789][0-9]{9}$" required placeholder="请输入手机号码"> 在表单里,input加上required属性的,意思就是内容不允许为空pattern是正则匹配,如:手机号码匹配:"^[1][3456789][0-9]{9}$"只能包含三个字母的文本字段(数字或特殊字符):"[A-z]{3}"placeholder为文本框里面的提示内容,想必大家都知道了。 当然还有(相信日后会增加更多):最大长度不能超过140:<input type="text" maxLength="140">输入类型必须为email格式:<input type="email">输入类型必须为数字,且必须在1~100之间<input type="number" min="1" m...

阅读全文

禁止文本大小根据设备大小自动调整

2013-12-19 19:03:00

最近在做ios应用页面时,用iPhone的safari打开,发现竖屏的字体显示正常,横屏字体变大网上查了N久,很多人都说在网站头部加上<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>即可解决此问题,后来发现完全没用,无意中在网上找的一个前端网站,测试下OK。现在记录下,权且当做笔记吧,也可以给更多的人分享:在css文件中加上如下代码即可解决此问题:.body{-webkit-text-size-adjust:none;}其实它的作用是:兼容safari 3.0+,chrome 1.0+ 解决字体大小根据设备大小自动调整问题而text-size-adjust:也有几种属性:percentage:字体显示的大小; auto:...

阅读全文