CSS部份技巧(兼容性)

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> 

<script type="text/javascript">

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;}

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="keywords" content="网页设计" />

<meta name="description" content="网页" />

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>

              <a href=javascript:window.close("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="列表框名称">

                      <option value="提交值" selected="selected"默认值>列表1</option>

                      <option value="提交值">列表2</option>

                  </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>