前端琐记

细数工做三个月来踩过的坑。。。

在作移动端页面时，遇到让两个元素（好比简单到两个单词）平分页面的宽度的状况， 不要使用给他们加a ,span 标签，而后让a,span宽度50%的方法。这种方法作不到彻底居中。

solution:利用div+float

当一个浮动元素（没有声明宽度）包含一个向右浮动的子元素时，它一样也会自动的延伸填充，以适应父元素的可用内容的宽度。

solution:尽可能为一个浮动元素指定一个具体的宽度值，

H5页面对一些元素进行旋转、变形锯齿修复

solution: -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)

熟悉各浏览器的内核能够避免作完页面全部浏览器都测试一遍的麻烦

Trident内核的常见浏览器有：[1] 　IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5以前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及之后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器[2] （最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及之后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 以前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。 其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，而后再增长一个其余内核。国内的厂商通常把其余内核叫作“高速浏览模式”，而Trident则是“兼容浏览模式”，用户能够来回切换。 ​ Gecko(Firefox内核)：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特色是代码彻底公开，所以，其可开发程度很高，全世界的程序员均可觉得其编写代码，增长功能。由于这是个开源内核，所以受到许多人的青睐，Gecko内核的浏览器也不少，这也是Gecko内核虽然年轻但市场占有率可以迅速提升的重要缘由。 Opera现已改用Google Chrome的Blink内核。 WebKit内核常见的浏览器：傲游浏览器三、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器， Blink 谷歌 基于KHTML内核的内核：WebKit、WebCore。

移动端页面a标签在触发点击时或则设置了伪类：active的元素，在激活状态时会出现高亮，但有时候并不须要

solution:设置样式：-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

垂直居中

solution:

1	利用lineheight;
2	将父级div的设置为display:table,将子div设置为display:table-cell。而后就可使用table特有的vertical-align:middle属性了。
3	利用负边距,先设置position：absolute而后设置top:50%接着设置margin-top:-(height/2)
4	首先设置display:box,而后box-align:center为兼容各浏览器请加相应前缀

水平居中

1	块级元素可使用margin:0 auto;
2	行内元素想button之类的可使用text-align:center;
3	使用负边距，原理同垂直居中
4	利用flexible-box，原理同垂直居中，设置box-pack:center
*	伸缩盒模型在移动端使用的较多，浏览器还有一些兼容性问题，不过网格布局在移动端和PC端使用都没有什么问题

给a加背景图片以前要先加高度而且display:block;

避免连接点击时随意跳转

在a标签内加入href="javascript:0"

no more until now~