IE10，IE11瀏覽器當點擊input text文字方塊時，輸入文字後出現一個刪除功能的X按鈕。
去掉input text文字方塊後的X按鈕的方法：為input text加上以下CSS
input::-ms-clear{ display:none; } //提示：input後面是兩個冒號，偽元素需要兩個冒號。
readonly ：不可編輯，不可獲得焦點，背景顏色默認透明，字體顏色預設為前景色黑色，值可以在請求中傳遞；
chorme和ie支持，firefox不支持readonly屬性（在屬性內定義：onfocus="this.blur()" ）
disabled ：不可編輯，不可獲得焦點，背景顏色默認灰色，字體顏色預設為灰色，值不可以在請求中傳遞；
標籤屬性( readonly)大小寫都不會影響其效果，但js的DOM中嚴格區分大小寫(readOnly)。
Firefox的css usage外掛程式可以顯示重複或沒有用到的css rules，每個頁面scan一次都比autoscan準。
Firefox不支援background-position-x/y屬性，要用background-position：X Y;代替。
position為fixed的元素，寬度為自適應的最小寬度，不會佔一整行。
表格的儲存格會自動收縮，不能利用overflow屬性。即使設定width屬性固定寬度，也會縮小到最小文字寬度。如果真要設定固定寬度，可以在td中嵌套p，給p設定寬度。或用table的table-layout:fixed;屬性。
表格的第一行決定整體表格的儲存格寬度。 如果要表格依照內容自適應寬度，只要加white-space:nowrap屬性即可。特別是ie，別的瀏覽器會自動調整寬度。
改變瀏覽器大小？
font的簡寫注意事項
1、簡寫時，font-size和line-height只能透過斜線/組成一個值，無法分開寫。
font: italic bold .8em/1.2 Arial, sans-serif;//family之間用，號碼
2、順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及font-varient ，他們會使用缺省值
頁面居中時出現滾動條不跳動的方法：
只有margin-left為auto時，出現捲軸會改變其值，頁面跳動。
1.body { overflow-y: scroll; } //超出時出現滾動條，不超出時依然會保留一個醜陋的灰色的滾動欄
2.wrap-outer {margin-left: calc(100vw - 100%);} //在左邊提前預留捲軸的寬度
//calc()是css3中的函數，可進行四則運算（前後必須有空格 ），可混合使用百分比、px、em 、rem等單位
// 100vw指viewport的寬度，包含滾動條的寬度；而100%是不包含滾動條的viewport寬度。
若margin-left為固定值，不會跳動。捲軸會出現在最上面一層，壓住下面的內容。
不同解析度顯示不同寬度
.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用样式
@media screen and (min-width: 1201px) { //设置了浏览器宽度不小于1201px时 abc 显示1200px宽度
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {//设置了浏览器宽度不大于1200px时 abc 显示900px宽度
.abc {width: 900px}
} 登入後複製
注意：CSS程式碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前）
塊元素預設佔據一行，如果寬度不夠，會自動換行，可以使用white-space:nowrap屬性強制不換行。
子元素設定width=100%,若有border的話，子元素寬度會超出父元素的固定寬度。
box-sizing: content-box|border-box|inherit;//指定盒模型計算寬和高的方式。
content-box: 寬和高隻應用到元素的內容框，元素的內邊距和邊框在寬度和高度之外繪製。
border-box：為元素指定的內邊距和邊框都會在已設定的寬度和高度內進行繪製。
.cf:after，.cf:before {content: " "; display: table;}
.cf:after {clear: both;}
：before是因為table類型能產生獨立的bfc，防止上邊距塌陷，
：after負責清除浮動，防止父級高度塌陷；搭配使用，程式碼少，效率高。
1.將父容器設為display:table並給固定高度，子容器設為display:table-cell，並配合使用vertical-align：middle屬性（在表中和行內元素中生效）即可。
或：父容器要用相對定位position:relative;子容器絕對定位，top:50%;left:50%;margin-top 和margin-left的值為該容器高度，寬度的一半的負值。
或： 父元素相對定位，子容器絕對定位，top:0，bottom:0，margin:auto，不用計算。
若要同時水平居中：使用position：relative屬性或再套一層p使用margin：auto屬性。
多列內容不固定等高css Hack：
父容器設定overflow:hidden;子元素:padding-bottom:9999px;margin-bottom:9999px;
每个p都增加相同的高度，内容少的增加的p会被父容器hidden掉。
label标签的for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系
例如，在 XHTML 中：
显式的联系：
<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSN" /> 登入後複製
隐式的联系：
<label>Date of Birth: <inputtype="text" name="DofB" /></label> 登入後複製
第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样 ，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 标签中放入
ie8之前不支持opacity属性，需要使用滤镜：filter:alpha(opacity=30); /*
IE 4-9 */
IE专有的滤镜属性filter是只适用于 layout 元素的，也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout，那么这个透明将无效。需要另外设置zoom：1；这个属性进行触发。
background-origin: 规定 background-position 属性相对于什么位置来定位。
padding-box 背景图像相对于内边距框来定位；（默认）
border-box背景图像相对于边框盒来定位；
content-box背景图像相对于内容框来定位。
background-position ： 设置背景图像的起始位置。
默认值：0% 0%（从背景图的左上点开始）；如果只设置一个值，另一个值将为“居中”（50%/center）
background-size: 取值（IE8不支持此属性）
百分比/length：背景图的尺寸相对于背景区域的长度。只设一个，第二个为auto（会保持比例不变，不变形）。
如果都设为100%，则背景图会铺满背景区域 ，但长宽比率会跟着变化。
contain:背景区域按背景图的固定比例包含整个背景图 。背景图的尺寸以背景图按固定比例扩大，其任意一条边到达背景区域的边界为止，经常会导致另一边空白。
cover:背景图按固定长宽比缩放至填充满整个背景区域 ，有一边的背景图会因超出背景区域而被切除。
IE8兼容：
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');
crop : 背景图大小不变，剪切图片以适应区域尺寸。
image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。
scale : 缩放背景图以适应区域的尺寸边界。
①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8
JPG：有损压缩，压缩比例高，体积小，打开快。不支持透明，色彩丰富，数码相机最常用的格式，压缩比率高。
PNG：无损压缩，体积大。
png8：支持透明/不透明，体积小，256种颜色，适合颜色比较单一的图像，如纯色、logo、图标等。
png24：支持半透明，体积稍大，1600万种颜色，适合颜色比较丰富的图片。
更多css相关tips相关文章请关注PHP中文网！
