| *{ | |
| margin: 0; | |
| padding: 0; | |
| // 防止点击闪烁 | |
| -webkit-tap-highlight-color:rgba(0,0,0,0); | |
| // 缩放网页，文字大小不变 | |
| -webkit-text-size-adjust:none; | |
| // 禁止选择 | |
| .user-select(none); | |
| } |
| option = { | |
| title : { | |
| text: '某站点用户访问来源', | |
| subtext: '纯属虚构', | |
| x:'center' | |
| }, | |
| tooltip : { | |
| trigger: 'item', | |
| formatter : function (a,b,c) { | |
| var str = a[0]+' <br/>'+a[1]+' :'+a[2]+a[5].unit+'('+a[3]+'%)'; |
一个好的服装设计师需要了解他使用的布料、人体结构、布料剪裁等技术。而一个优秀的网页设计师，同样要了解设计出来的网页效果，浏览器是否可以全部实现、部分（降级）实现、无法实现等。
网页永远都是在浏览器里显示，只是载体（设备）不同，有时是电脑，有时是手机、平板等。浏览器有很多种，电脑、手机、平板也有很多种，各自都有细微不同，所以才造成兼容性问题，也是前端最头痛的问题。如果设计师能了解大部份差异，那么在设计界面的初期，就能预测到各个浏览器和设备的显示效果，和前端人员的配合也会更加愉快。
浏览器分为现代浏览器（Google Chrome、火狐Firefox、Safari、IE10+、360极速等），IE浏览器（IE7-IE9）和IE6浏览器。其中IE6是最多问题的，因为他的生产日期是2001年，而现代浏览器不断的更新，是支持度最高的。手机、平板里面都是现代浏览器，所以兼容性稍微比电脑乐观一点，但也有他自己的问题。
###一些常见的兼容性
| 既然大家接受不了BEM那种严格模式，那么就尝试一下BEM改进版。 | |
| * 不允许有标签没有类名，既所有标签必须有类名 | |
| * 按照模块来取名，而不是项目来取名 | |
| * 单词或缩写之间，用`-`连接。模块(block)里面都是元素(element)，请用`_`连接，且只能连一次，例如`.hot-buy_search-box`。如果有状态(modifier)，请在后面用`_`连接，例如`.header_search-box_current`。类名最多只能出现两个`_`。 | |
| 示例html结构： | |
| <div class="hot-buy"> | |
| <ul class="hot-buy_tab-title"> |
| .flexbox(){ | |
| display:-webkit-box; | |
| display:-webkit-flex; | |
| display:-ms-flexbox; | |
| display:flex; | |
| } | |
| .flex(){ | |
| -webkit-box-flex:1; | |
| -webkit-flex:1; | |
| -ms-flex:1; |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| /* 防止点击闪烁 */ | |
| -webkit-tap-highlight-color:rgba(0,0,0,0); | |
| /* 缩放网页，文字大小不变 */ | |
| -webkit-text-size-adjust:none; | |
| } | |
| /* 去除虚线 */ | |
| input:focus,select:focus,textarea:focus,button:focus{ |