页面开发干货，主要包括：用户体验，性能问题、兼容问题、页面常用、工作问题总结。希望可以帮助大家，一起搞问题。
一、用户体验
用户体验：“智商非常低,脾气非常差,没什么耐心,又很小气不舍得花一分钱”。
工作中遇到问题：（重要）
1、清除ie的默认选择框样式清除，隐藏下拉箭头ie9
select::-ms-expand {display: none;}
2、IE10 取消input框默认的叉叉和密码输入框的眼睛
::-ms-clear { display: none; }
::-ms-reveal { display: none; }
3、*autocomplete="off";关闭浏览器的保存用户名与密码功能 （重要）
4、input,textarea{outline:none;}去掉chrome,safi框选择。
5、禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;}
6、高速模式显示（webkit）
1）360高速浏览
2）用以声明当前页面用chrome内核来渲染。
7、超链接访问过后hover样式就不出现的问题 L-V-H-A
图片优化工具 http://www.smushit.com/ysmush.it/
http://tinypng.org/
8、textarea去掉滚动条（行内样式） border:none;overflow:hidden
9、字距离问题：letter-spacing:-1px;letter-spacing:-1px !important;
10、text-transform:capitalize; 第一个字母大写 top Top
11、Chrome, 其默认有最小字体大小限制 -webkit-text-size-adjust:none;
12、HTML5已经去掉name属性，实现锚点时请使用id
二、性能问题
1、border:0消耗内存 border:none不予对border进行任何渲染，节省内存。
三、兼容问题：
1、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）
解决方法：display:inline
2、img于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
3、PNG半透明图片的问题 DD_belatedPNG.js
4、li在IE中底部3像素bug float:left;width:100%;
5、IE7下position:relative与overflow的问题
父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。
给设置了overflow:auto属性的父容器也加上position:relative。
6、清除图片下方出现几像素的空白间隙
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：#test{font-size:0;line-height:0;}
7、css hack
IE6能识别*，但不能识别!important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
例如：
color:gray; FF等非IE浏览器字体色将为灰色
color:red\9; IE8 IE9字体色将为红色
*color:green; IE7字体色将为绿色
_color:blue; IE6字体色将为蓝色
8、inline-block 元素之间会莫名其妙多出3px的间距 (重要)
处理方法：在inline-block的父元素中加上 font-size：0；
font-size:0清除换行符间隙
.space {font-size: 0;-webkit-text-size-adjust:none;}
.space a {font-size: 12px;}
9、overflow：hidden和display: inline-block一起使用时会造成baseline的移动，加了vertical-align: bottom可以解决这个问题。
10、white-space属性应用：
white-space:normal; 默认。空白会被浏览器忽略。
white-space:pre;空白会被浏览器保留
white-space:pre-line; 合并空白符序列，但是保留换行符。
四、页面常用
1、Favicon
favicon图标介绍转换地址：http://www.bitbug.net/一般大小：16X16 favicon.ico
2、省略号兼容问题
white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;/*设置超过的隐藏*/width:420px;
3、visibility: hidden;与display:none区别：
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
4、引入CSS的方法有两种，一种是@import，一种是link
@import url('地址');
现在绝大部分的网站都采用后一种link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML。
5、Strict（严格）、Transitional（过渡） XHTML 1.0 Transitional是更加宽容的规范。Strict完全将结构与表示分离
6、 打造高品质的前端代码，提高代码可维护性——（精简，重用，有序） (网页重构)
精简代码可以让文件变小；有利于客户端快速下载；重用可以让代码更易于精简。同时有助于提升开发速序，有序可以让我们更清晰的组织代码，使代码易天维护，有效应对变化。
7、常用块元素与内联元素：
块元素 div、form 、h1、 p、table 、ul
内联元素 a、br、em、input、span、strong
8、Xenu使用方法:检测网站连接有效性、耗费的网络资源、死链接 (重要)
9、CSS中position属性( absolute | relative | static | fixed )详解
static，无特殊定位，它遵循正常的文档流对象，对象占用文档空间
relative定位也是遵循正常的文档流,占有文档空间
absoulte：根据祖先类元素(父类以上)进行定位
fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。
z-index属性： 需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
10、国内的主流浏览器都是双核浏览器
由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。
以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。
11、重绘 (redraw)和重排()，需要付出高昂的性能代价。
重绘一般是颜色等不引起文档结构变化时发生的
重排一般是位置，大小，节点变化引起文档空间变化时发生的
开发中，比较好的实践是尽量减少重排次数和缩小重排的影响范围。
1. 将多次改变样式属性的操作合并成一次操作。
2. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。
3. 在内存中多次操作节点，完成后再添加到文档中去。
4. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。
5. 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。
以下三种情况，会导致网页重新渲染。(重要)
修改DOM
修改样式表
用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）
重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。
五、工作问题总结：
1、表单中Readonly和Disabled的区别
1）Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
2）表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。
小技巧：diabled可用readonly代替，background-color:#cccccc;加上灰色背景色就可以。
例如：
2、网页下方滚动条去除：（重点）
{overflow:scroll;overflow-x:hidden;}
3、在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。（重要）
设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素。