(我的CSS收藏和心得.docVIP

css解决兼容的问题 1；float的闭合 在float元素间增加一个标记 div class=clear/div 这个样式定义为： .clear { 　clear:both; } 2：最好的div居中方法 .someStyle { 　width:xpx; 　margin:xpx auto; } 3：strong标签重写的好处 对于特定的内容，如果要进行强调，又需要设置自己的样式，可以不必另行定义div，而用strong标签的重写。 例如如下的HTML代码： div id=somePart strong我是强调的内容/strong，我是普通的内容 /div 对应的CSS文件如下： #somePart strong { font-weight:normal; color:#f00; } 4：IE的display:inline; 当box为float时，IE下面会使得margin加倍。真是莫名其妙……IE6页没有解决这个问题。 解决方法是float后续标签闭合（见前），并且给float的box赋以“display:inline;”的属性，至于这该死的 display:inline是什么意思， 5：另外一个IE的sbbug 当Windows样式主题为XP样式时，所有的按钮不能定义background-image，只能定义background，也就是说 #regb { ... background:url(images/reg/login.gif) no-repeat; ... } 可以，然而 #regb { ... background-image:url(images/reg/login.gif) no-repeat; ... } 就不行了！ 唉！不过加上background-color:transparent;之后就好了！ 6：换行打破float的问题 假设布局 A|B div B标浮在A的右侧，这时候如果不设定B的宽度，则B很可能由于内容过多而撑破大的布局，跑到A的下面，形成 A B 的局面。 因此一定要注意设置B的宽度。 7：IE与FF对宽度的理解不同 在IE中，如果子元素宽度超标，会自动“撑破”母元素，而FF不会，所以常用FF调试的时候，一定要确保子元素width小于母元素。 不管是IE还是FF, border都是跟padding走的。而width则在IE和FF有不同的理解，准确地说，border会跟width+padding走！ 8、关于高度的问题 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事） 9、最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于!important会自动优先解析,然而IE则会忽略.如下 .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 */ } 10、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如： div id=IamFloat/div 相应的css为 #IamFloat { 　float:left; 　margin:5px;/*IE下理解为10px*/ 　display:inline;/*IE下再理解为5px*/ } 11、float的div一定要闭合。 例如：(其中floatA、floatB的属性已经设置为float:left;) wrapper div id=floatA/div div id=floatB/div div id=NOTfloatC/div /wrapper 这里的NOTfloatC并不希望继续平移，而是希望往下排。 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。 在 div id=floatB/div div id=NOTfloatC/div 之间加上div class=clear/div aw提醒您：这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear { 　clear:both; }