AdiHuang

Posted 2016-03-24Note

外层：div设置超出不显示，
内层：div底部内边距10000px，div底部外边距-10000px。

.outerDiv { overflow:hidden;}
.interDiv { padding-bottom:10000px; margin-bottom:-10000px;}

Posted 2016-03-24Note

单行内图片和文字垂直居中(vertical-align:middle)

当图片和文字在div内单行排列时，文字会自动与图片的底部对齐，如果我们要使图片和文字垂直居中，只需要在图片img属性里加上vertical-align:middle;就可以了。

img { vertical-align:middle;}

Posted 2016-03-24Note

css透明度设置opacity

.opacity{
  filter:alpha(opacity=50);   /* IE */
  opacity:0.5;                /* 支持opacity的浏览器*/
  -moz-opacity:0.5;           /* 老版Mozilla */
  -khtml-opacity:0.5;         /* 老版Safari */
}

Posted 2016-03-23Note

Meta告知IE浏览器兼容模式

x-ua-compatible(浏览器兼容模式)
仅对IE8+以效
告诉浏览器以什么版本的IE的兼容模式来显示网页

<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

其中最后一行IE=edge是永远以最新的IE版本模式来显示网页的。
另外加上Emulate模式

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

Emulate模式后则更重视<!DOCTYPE>
(细心的人会注意到，用IE9去访问带有x-ua-compatible的页面时是不会出现兼容视图按钮的)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Posted 2016-03-23Note

contenteditable 属性规定是否可编辑元素的内容

<div contenteditable="true">这是一段可编辑的段落</div>

注释：可用于div模拟textarea自适应高度

Posted 2016-03-23Note

input text 去掉标签下拉提示(不显示下拉历史)

<input autocomplete="off">

注释：autocomplete 属性适用于 form，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

Posted 2016-03-22Note

移动端wap用到的头部信息代码meta

禁止页面缩放

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

禁止数字拨号功能

<meta name="format-detection" content="telephone=no">
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>

禁止页面缩放

禁止数字拨号功能

Tags