css总结

标签：group   表格   也有   htc   dtd   半透明   box   空间   浮动   

1.如果利用<img>标签把图片放进表格单元里面，并注意到在图片下方有不需要的空间，那么设置它的display属性为block.

2.text-align可以被继承，vertical-align属性不会被继承

3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。

表格中的每个列都包括一个<col>标签，可以用类或ID来识别它们。只有两组属性对这些标签起作用：width和background属性。

4.IE6.0兼容支持透明背景

5.浏览器兼容处理半透明效果

6.公共样式重置

7.IE6.0图片下产生空隙

解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0;

8.<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思

 X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：
<meta http-equiv="X-UA-Compatible" content="IE=7" />
这样我们才能使得页面在IE8里面表现正常！

9.使用position:relative;

设置一个标签的position:relative;可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架，当然你要小心，绝对位置放置的子元素是否都参照找到新位置。

10.为浮动元素使用display:inline;

浮动元素会有一个著名的IE6.0双边距。假如你设置了左边距5px但实际上是10px左边距，display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。

11.修复重复字符的bug

复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决方法:a.确保几种元素都使用display:inline;b.最后一个浮动元素使用margin-right:-3px;c.在浮动对象最后一个元素后使用一个条件注释，例如这里输入注释...<![endif]>;d.在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）

12.去掉网页链接上点击时的虚线

方法1：在<a>标签中加入onFocus="this.blur()"语句：

<a href="http://hszy00232.blog.163.com/blog/#" onFocus="this.blur()">try</a>

方法2：在<a>标签中加入hidefocus：

方法3：如果连接太多，可以用外部链接 .HTC 文件。
如，blur.htc 文件内容如下：

<public:attach event="onfocus" onevent="makeblur()"/>
<script language="javascript">
function makeblur(){
this.blur();
}
</script>
在 CSS 中加入如下代码：

A { behavior:url(blur.htc); }

方法4：使用CSS样式，可加入代码：

a {blr:expression_r(this.onFocus=this.blur())}
这样，站内所有的文章都实现了无虚线效果了。

13:zoom:1的作用

在兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout;解决ie下的浮动，margin重叠等一些问题。

14:深入理解display:inline-block;

display:inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

支持的浏览器有：Opera、Safari,FF3.0+。

在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout,而它本就是行布局，所以触发后，块元素依然还是行布局，从而使内联元素拥有了display:inline-block 属性的表症,而不会如 Opera 中块元素呈递为内联对象。

IE下块元素如何实现 display:inline-block 的效果：

方法1：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。

div {display:inline-block;...}
div {display:inline;}

方法2：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。

div {display:inline; zoom:1;...}

15.css浏览器兼容总结

class{

* background-color:#00FF00;
_ 
}

@media all and(min-width:0){ 
.class{
 
} }

@media all and (min-width:0){ 
.class{
 
html* .class{
 
}
}} 

css总结

标签：group   表格   也有   htc   dtd   半透明   box   空间   浮动   

原文地址：http://www.cnblogs.com/si-ying/p/6674608.html