css今日小结

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

解决办法：IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

2.通用的加入收藏代码

// <![CDATA[

function bookmark(){

var title=document.title

var url=document.location.href

if (window.sidebar) window.sidebar.addPanel(title, url,"");

else if( window.opera && window.print ){

var mbm = document.createElement('a');

mbm.setAttribute('rel','sidebar');

mbm.setAttribute('href',url);

mbm.setAttribute('title',title);

mbm.click();}

else if( document.all ) window.external.AddFavorite( url, title);

}

// ]]>

</script>

<a href="javascript:bookmark()">加入收藏夹</a>

3.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题。

解决方法是为链接定义一个相对定位属性。position:relative
4.如何垂直居中对齐文本与文本输入框

遇到此种问题，设置文本框的 vertical-align:middle 就可以了

5.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id="aa" 一个页面中不容许重复2次,而class 定义的是类,理论上可以无限重复的, 这样需要多次引用的定义便可以使用他.class还可以同时引用多个类,不同的类之间用空格隔开.
二.属性的优先级问题,ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.

6、LI中内容超过长度后以省略号显示的方法

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

7.list-style-image无法准确定位的问题

这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决

li { list-style:url("/uploadfile/200806/17/4D193352197.gif"); }

li a { position:relative; top:-5px; font:12px/25px 宋体;}

<body>

<ul>

<li><a href="#">web标准常见问题大全</a></li>

</ul></body>

8.IE6下这两个层中间怎么有间隙

.left { float:left; 100px; height:100px; background:red }

.right { 100px; height:100px; background:orange } --> </style>

<div class="left">aaaaaa</div><divcass="right">aaaaaa</div></span>

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

9.IE6下为什么图片下方有空隙产生

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

10.ff下为什么父容器的高度不能自适应

为什么这个P撑不开DIV呢？解决的办法是在div 与 p 之间插入<div style="clear:both"></div>清除掉这个p的浮动.
什么？你在IE下也碰到过类似问题！

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

11.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: Link-Visited-Hover-Active

12.屏蔽网页图片工具栏的两种方法