css2常用属性讲解以及兼容性问题

最新推荐文章于 2022-11-29 17:39:44 发布

suansuan1918121

最新推荐文章于 2022-11-29 17:39:44 发布

阅读量429

点赞数

分类专栏：前端文章标签： css 兼容性

本文链接：https://blog.csdn.net/suansuan1918121/article/details/41895161

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

常用属性特性介绍：

display

block，块状标签，可设置宽高，但如果不使用浮动的话，默认占一行

inline，行内，设置宽高属性无效，但添加浮动后，可设置宽高，可解决block+float在ie6下的双倍margin边距问题

inline-block因为在低版本的ie下无效的原因，基本不使用

none常用于遮罩，或者tab，表示不显示，与disabled失效相区分

float浮动

浮动，脱离文档流，紧靠父级或者相邻的浮动元素形成特殊的排版，相同，还有absolut绝对定位（脱离文档流），配合margin，三者都有控制排版的作用

left，right，none，属性一目了然，不多说

清浮动：伴随父级长宽的脱离内容利用after伪类，在父级下最后加入content内容 clear:after{content:"";display:block;clear:both} 伪类在ie67下失效，使用

zoom，.clear{zoom:1},启动ie的haslayout

提醒，overflow：auto也有根据内容自由伸展长宽的作用

position位置

absolute绝对定位，针对relative父级的绝对定位，left，top,bottom,right, 绝对定位要讲的是当同时设置left:0;right:0;时，宽度为100%，高度类似，但在ie6下失效；可用百

分比，left:50%;

relative相对定位，相对原始位置的位移，同样有left，right，top,bottom属性

定位元素，不管事绝对定位还是相对定位，默认后者的层级比前者的高；使用z-index改变层级关系

小结，可定位的css属性，float，position，margin，具体使用参考上文, margin值可负。

居中问题，普遍设置margin，配合text-align即可；绝对定位中，absolute top：50%；left：50%；在通过和margin-top：负值来绝对定位的居中

css的书写顺序

1.display，float……2. width,height,border…… 3.text-align,font……不难发现书写顺序为由外而内，从位置，到自身属性，再到内容格式设定

background属性

要讲的还是后面的定位问题，根据第四像界位置定位图片，当然另外可以用left top……

a标签伪类的书写顺序

LoVe HAte(喜欢讨厌)link，visited，hover，actived(不按顺序写，有些会失效)

不常用记不住的记录下

letter-spacing（字母间距），word-spacing（单词间距）

关于文本的换行

不换行超出部分用省略号代替： overflow:hidden;//超出隐藏 text-overflow:ellipsis;//使用省略 white-space:nowrap;//不换行 -o-text-overflow:ellipsis;

word-break是控制是否断词的。

normal是默认情况，英文单词不被拆开。 break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。 keep-all，是指Chinese,

Japanese, and Korean不断词

word-wrap 是控制换行的。

break-word时，是将强制换行

white-space设置如何处理元素内的空白

normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到

<br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。

最好的方式是word-wrap:break-word;overflow:hidden;

文本框，禁止中文输入法，ie有效

文本框只能输入英文css: ime-mode:disabled;

背景，图片透明度设置：

opacity:0.7; filter:alpha(opcaity=70);其实这也是一种兼容性问题，太常规就不特意归类为兼容性透明度有一个继承性的问题，父级的透明度会带给子级，所以，遮罩层上

的div，用了两个遮罩层的绝对定位，并带有层级关系。

好，下一部分内容，兼容性的问题

普通兼容性：

问题：ie67下div的最小高度问题 div 用于hr的作用，设置宽高，但在ie67下有一个19px的最小高度问题

1.font-size:0;可是最小高度达到2px

2.使用overflow:hidden，能最小高度1px

问题：在ie67下块状元素，浮动后的margin双边距问题

1.将块状改为inline即可

问题：li在ie67下浮动，有几个px距离的问题

1.父级ul清浮动

ie下 的使用；针对特定ie浏览器版本才执行，比如，ie6处理png

块元素中含有图片时，ie67图片下面有空隙

解决： 1、在源代码中让</div>和<img>在同一行 2、将图片转换为块级对象display:block; 3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom 4、改变父对象的

属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden; 5、设置图片的浮动属性 float:left;

ie6下，width，height，不能为奇数，不然多出一个像素1px

ie6下，左右层，左层浮动，右层没有，中间会有3px间隔，解决方式，都加浮动

小结，不难发现，这个往上2-3个兼容性问题，固然有浏览器本身的原因（ie6），另外代码的不规范也是兼容性原因之一

td内含有元素使用绝对定位，td加relative，ff下无效

td加display:block;

了解性摘录：

单选框、复选框与后面的文字对不齐。解决： .align{font-size:12px;} .align input{ display:block; float:left;} .align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}

<body οncοntextmenu="return false" οndragstart="return false" tstart="return false" scroll="auto"> 这行代码放在body中，去掉了页面鼠标右键快捷菜单，达到防止图片另存为的目的。

cursor:hand 和 cursor:pointer firefox不支持hand，但ie支持pointer 解决方法: 统一使用pointer

在ie678下文字的默认高度和其他浏览器不同，chrome下还有文字最小12px的限定

css Hack

问题，盒装模型在低版本ie5和其他高版本ie及其他浏览器下的解释不同 eg：ie5下width，包括padding，border，margin，其他浏览器width就是指context内容部分

不考虑ie5，但是在ieTest测试的时候，不管什么版本都出现这个问题用我的ie11，测试各版本，仅在ie5下有这个问题。建议,不用管这个破问题解决方式是，使

用!important,让ie6以上浏览器识别优先级 height:29px !important; height:31px;（这里面的2px差，在于我设置了1px的border） _height:29px;(ie6)

问题：div，加padding后，在高版本ie和ff下改变宽高

1.使用!important，用法参考上文 eg：width:90px !importnt;width：100px；padding-left:10px;

问题：低版本ie，对margin的解释会有2px的增加

用!important margin:4px !impotant;margin:2px;

问题：div的最小高度min-height的不兼容

min-height:400px; //（解决ie8.9.ff.chrome） *+height:100%; //（解决ie7） _height:400px; //（解决ie6） ie6超出自动溢出

2.引伸：高度自适应 mine-height:100px;height:auto!important;height:100px; 设置的宽度可变，因ie6下宽度自增，同时不认可！important ，给一个宽度即可

问题：ie6下透明png

1.js方式，引用外部js

2.css Hack background:……;/* 其他浏览器 */ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 绝对定位*/ _background-image: none; /* IE6 */

小结： !important ie78及以上有效 *+html{……}仅ie7有效 _ 仅ie6有效 * ie67有效 \9 仅ie有效 的使用其他，不做介绍，其

他的实用价值有限