html网页设计中的问题新手必备css常见问题及解决计划

#abc { color: #333; } / Moz /

html #abc { color: #666; } / IE6 /

+html #abc { color: #999; } / IE7 /

（图片来自网络侵删）

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

CSS布局中的居中问题首先在父级元素定义TEXT-ALIGN: center;这个的意思便是在父级元素内的内容居中；对付IE这样设定就已经可以了。
　　但在mozilla中不能居中。
办理办法便是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 　　须要解释的是，如果你想用这个方法使全体页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

盒模型

#box{

width:600px;

//for ie6.0- w\idth:500px;

//for ff+ie6.0

}

#box{

width:600px!important

//for ff

width:600px;

//for ff+ie6.0

width //:500px;

//for ie6.0-

}

浮动ie6产生的双倍间隔这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以掌握(块元素);Inline元素的特点是:和其他元素在同一行上,…不可掌握(内嵌元素); 　　#box{ display:block; //可以为内嵌元素仿照为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

#box{ float:left; width:100px; margin:0 0 0 100px;

//这种情形之下IE会产生200px的间隔 display:inline; //使浮动忽略}

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

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

#container{

min-width: 600px;

width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );

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

最小宽度。
/

}

打消浮动

.hackbox{

display:table;

//将工具作为块元素级的表格显示

}

或者

.hackbox{

clear:both;

}

或者加入:after（伪工具）,设置在工具后发生的内容，常日和content合营利用，IE不支持此伪工具，非Ie 浏览器支持，以是并不影响到IE/WIN浏览器。
这种的最麻烦的

...

#box:after{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

DIV浮动IE文本产生3象素的bug左边工具浮动，右边采取外补丁的左边距来定位，右边工具内的文本会离左边有3px的间距.

#box{

float:left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width:50%;

}

html #left{

margin-right:-3px;

//这句是关键

}

HTML代码

</DIV>

属性选择器(这个不能算是兼容,是隐蔽css的一个bug)这个对付IE6.0和IE6.0以下的版本都隐蔽,FF和OPera浸染,属性选择器和子选择器还是有差异的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

p[id]{}div[id]{}

IE捉迷藏的问题当div运用繁芜的时候每个栏中又有一些链接，DIV等这个时候随意马虎发生捉迷藏的问题。
　　有些内容显示不出来，当鼠标选择这个区域是创造内容确实在页面。
办理办法：对#layout利用line-height属性或者给#layout利用固定高和宽。
页面构造只管即便大略。

无法定义1px旁边高度的容器 IE6下这个问题是由于默认的行高造成的,办理的方法也有很多

overflow:hidden | zoom:0.08 | line-height:1px

使一个层垂直居中于浏览器这里我们利用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

FF与IE

1.Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 弗成，IE须要设定body居中，首先在父级元素定义text-algin: center;这个的意思便是在父级元素内的内容居中。

2.链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 担保不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

3.超链接访问过后hover样式就不涌现的问题被点击访问过的超链接样式不在具有hover和active了,很多人该当都碰着过这个问题, 办理方法是改变CSS属性的排列顺序: L-V-H-A

游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

BOX模型阐明不一致在FF和IE 中的BOX模型阐明不一致导致相差2px办理方法：div{margin:30px!important;margin:28px;} 把稳这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。
以是在IE下实在阐明成这样

div {maring:30px;margin:28px}重复定义的话按照末了一个来实行，以是不可以只写margin:xx px!important;

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width //:500px; //for ie6.0-}

最狠的手段!important; 如果实在没有办法办理一些细节问题,可以用这个方法.FF对付”!important”会自动优先解析,然而IE则会忽略.值得把稳的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

.tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /Style for FF/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; / Style for IE /}

IE,FF的默认值问题或许你一贯在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边诅咒那个可恶的M$ IE.实在对付css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，节制了这个技巧，你会创造写出兼容FF和IE的css并不是那么困难，或许对付大略的css，你完备可以不用”!important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了详细的描述，当然也没有必要那么做，以是对付那些没有描述的属性，浏览器将采取内置默认的办法来进行显示，譬如笔墨，如果你没有在css中指定颜色，那么浏览器将采取玄色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。
以是有很多东西涌现FF和IE显示不一样的根本缘故原由在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对付这点也就别去怪罪IE了。

最小高度为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开须要若何设置呢？办法便是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义

{ height:auto!important; height:200px; min-height:200px; }

自动换行FireFox下如何使连续长字段自动换行众所周知IE中直策应用 word-wrap:break-word 就可以了, FF中我们利用JS插入的方法来办理

</style> <div id=\"大众ff\"大众>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type=\"大众text/javascrīpt\公众> / <![CDATA[ / function toBreakWord(el, intLen){ var ōbj=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); / ]]> / </scrīpt>

浏览器的兼容性第一种，是CSS HACK的方法 height:20px; /For Firefox/ height:25px; /For IE7 & IE6/ _height:20px; /For IE6/ 把稳顺序。
这样也属于CSS HACK，不过没有上面这样简洁。

#example { color: #333; } / Moz / html #example { color: #666; } / IE6 / +html #example { color: #999; } / IE7 /

<!--[if IE 7]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

css超出省略号LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器

li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }