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;这个属性进行触发。
IE8开始添加的属性,指定浏览器去模拟某个特定版本的IE浏览器的渲染方式,解决IE的兼容性问题。
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中文网!