CSS部份技巧(兼容性)

来源：互联网发布：记经期的软件编辑：程序博客网时间：2024/06/04 19:15

CSS部份技巧(兼容性)

注意：行内元素不能设置样式如：span等行内元素

1、div的垂直居中问题？

解决：vertical-align:middle; 将行距高度整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是内容不要换行。

2、浮动和margin同时用的时候会出现加倍的问题(IE6下)？

解决：#box{ float:left; width:100px; margin:0 0 0 100px;}在这个div里面加上display:inline;(转换成行内元素)。

3、 IE与宽度和高度的问题？

解决：IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}

html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

4、页面的最小宽度？

解决：min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div> 放到＜body> 标签下，然后为div指定一个类,然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

5、DIV浮动IE文本产生3象素的bug？

解决：左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

＜div id="box">

＜div id="left">＜/div>

＜div id="right">＜/div>

＜/div>

6、IE捉迷藏的问题？

解决：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

7、清除浮动(float)四种方法？

1、使用一个空div、p等标签clear：both；缺点:会增加额外的代码；

2、给父元素加上overflow：hidden；

3、在父元素中加上clear：both；（自己常用）；

4、网上最流行.clearFix:after{clear:both; display:block; visibility:hidden; height:0; line-height:0; content:"";}

.clearFix{zoom:1;}解决IE6问题

8、在无序列表中使用line-type-image在IE 6和火狐中不对齐？

解决：background：url no-reap 定位；

9、火狐导航列表中a想要定义样式？

解决：display:block;

10、定位问题(position)?

1、绝对定位（以父元素为基准点，进行定位---会脱离文档流）

一、给父元素加定位属性建议加position：relative；

二、给子元素加position：absolute；同时要加方向属性；

否则：就不会再父元素中而是整个游览器屏幕的左上角来计算。

2、相对定位（以自身为基准点，进行定位---离开原来位置，但还站着原来的空间）。

11 .IE6下为什么图片下有空隙产生？

解决：设置img 为display:block；或者设置vertical-align 属性为vertical-align:top 　 bottom 　middle 　text-bottom 都可以解决。

12、如何对齐文本与文本输入框

解决：加上 vertical-align:middle;

13、 LI中内容超过长度后以省略号显示的技巧？

解决：此技巧适用与IE与OP浏览器 li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }。

14、为什么无法定义1px左右高度的容器？

解决：IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden 　 zoom:0.08 　 line-height:1px ；

15、怎么样才能让层显示在FLASH之上呢？

解决：给FLASH设置透明

＜param name="wmode" value="transparent" />

16、为什么FF下文本无法撑开容器的高度？

解决：{ height:auto!important;（对不支持IE6设的） height:200px;

min-height:200px; }

17、FireFox下如何使连续长字段自动换行？

解决：IE中直接使用 word-wrap:break-word ； FF中使用JS插入

＜style type="text/css">

＜!--

div {

width:300px;

word-wrap:break-word;

border:1px solid red;

}

-->

＜/style>

＜div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

function toBreakWord(el, intLen){

var obj=document.getElementById(el);

var strContent=obj.innerHTML;

var strTemp="";

while(strContent.length>intLen)

{

strTemp =strContent.substr(0,intLen) " ";

strContent=strContent.substr(intLen,strContent.length);

}

strTemp =" " strContent;

obj.innerHTML=strTemp;

}

if(document.getElementById && !document.all)

toBreakWord("ff", 37);

</script>

18、link-visited- hover- active顺序不能调否则有的用不了？

解决：L-V-H-A

19、IE6、7 专用属性？

_height: 100px;、 *height: 100px; IE6 专用

*+height: 100px; IE7 专用

!important; 只有IE6不支持

＜!--其他浏览器 -->

＜link rel="stylesheet" type="text/css" href="css.css" />

＜!--[if IE 7]>

＜link rel="stylesheet" type="text/css" href="ie7.css" />

＜![endif]-->

＜!--[if lte IE 6]>

＜link rel="stylesheet" type="text/css" href="ie.css" />

＜![endif]-->

CSS中常用的公用代码：

注意：tab向右缩进

tab+shief向左缩进

body {font-family:"宋体", font-size:12px; color:#000;}

body,div,p,span,form,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; border: 0; }

ul,li{list-style:none;}

img{vertical-align:top; border:none;}

a:link,a:visited{color: #1f3a87; text-decoration:none;}

a:hover {color: #bc2931; text-decoration:underline;}

a:active {color: #bc2931;}

CSS中常用的标签属性：

一、图片与文字混合应用：

属性（src、alt、title、width、height、border、aline、vspace、hspace）

二、表格（table）：

1、table属性（bgcolor、background、border、border-collapse、cellspacing、cellpadding、bordercolorlight、bordercolordark、aline、width）

2、tr属性（width、height、bgcolor、aline、valine）

3、td属性（width、height、bgcolor、background、aline、valine、rowspan、colspan、nowarp="nowarp"）

4、直列化格式（colgroup）：

属性（align、valign、span(直列数)、bgcolor）

三、超链接：

1、设为首页：<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页</a>

2、加入收藏夹：<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夹</a>

3、脚本链接：<a href=javascript:window.open("http://www.163.com")>百度</a>

四、表单元素标记（text、password、radio、checkbox、file、hidden、submit、reset、button、image必须包含type和name属性）：

1、label的用法(for的属性跟id一样)：<label for="man">男</label><input type=radio name=sex value="男" id="man" />

2、radio的用法：name一样代表在同一组，checked="checked"默认值

3、列表框的用法：<select name="列表框名称">

</select>

4、分组的用法(在select标签和option标签之间添加)：<optgrout label="分组名称"></optgroup>

5、表单外框的用法：<fieldset>..</fieldset><legend>..</legend>为fieldset元素定义标题

6、多行文本框用法（属性(cols、rows、name)）：<textarea>...</textarea>

五、插入flash二种方法：

1、embed标签

2、通过dw自动生成代码<object>