css实战技巧
IE6浏览器网页文字溢出解决办法 解决办法： 1、不放置注释。最简单、最快捷的解决方法； 2、注释不要放置于2个浮动的区块之间； 3、使用IE注释格式，如：<!–[if !IE]>litaonet.cn导航<![endif]–> 4、给盒子加position:relative;属性。
去链接虚框：a,img { huerreson:expression(this.onfocus=function(){this.blur()}); } a { blr:expression(this.onFocus=this.blur()) } /* for IE */ a { -moz-outline-style: none; } /* for Firefox */
注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明： 程序代码 !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ””
*+html 与 *html 是IE特有的标签，Firefox 暂不支持。而*+html 又为 IE7特有标签。
!important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
看一下搜索框 是由一个文本输入框和一个搜索按钮组成的文本输入框 和搜索按钮都没有外边框，但是输入框会有默认的外边框，如何去掉外边框 最直接的方法是设置border:none;如果只是设置这个属性ie6下面会这样的效果：
如何解决这个问题呢 我们可以设置一个overflow:hidden;*border:red;这个属性就完全可以解决了*border:可以是任意的颜色。
pre xmp 自动换行
pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */}
IE6出现文字溢出现象 具体解决办法:
1、不放置注释。
2、注释不要放置于2个浮动的区块之间。(会引起浮动解释的bug导致文字益出)
3.可以用相对定位直接消除
CSS3 背景渐变 兼容所有浏览器：background-image:-moz-linear-gradient(top,#FDFDFD,#F6F4F5);/* Firefox */
background-image:-webkit-gradient(linear, left top, left bottom , from(#FDFDFD), to(#F6F4F5));/* Chrome、Safari*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr = ‘#FDFDFD’,EndColorStr = ‘#F6F4F5′);-ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorStr=’#FDFDFD’,EndColorStr=’#F6F4F5′)”;
IE记的要设宽度
input标签type=file按钮样式自定义-js+css|走在前端
<input type=”file”/>标签在各浏览器的现实 效果如下：
1：ie6中
2：ie7中
3：ie8中
4：火狐浏览器中
大家可以看出，就从默认效果上来说，就有3种不同显示，况且我们控制“右侧”按钮又不能通过给input标签添加样式来完成，那么究竟怎么设置input标签type=”file”时的按钮样式呢？
具体思路是：将<input type=”file”/>设置透明filter:alpha(opacity=0);opacity:0;然后控制它的层要高z-index:1;这样就使<input type=”file”/>处于整体有名悬浮状态。另外我们要虚拟一个左输入框和右按钮来代替原有的input file，虚拟样式如下
由于此时input type=file的是在高层的，如果它不透明的话就会遮挡下边的元素，显示如下
对比以上两个图片，不难看出差别。就是要用input file的按钮覆盖到你所虚拟的上传按钮上，以达到点击弹出选择目录的对话框的效果。
还要注意此时的file框式透明的，所以用户选择上传文件后，路径是不可能看到的。因此还必须将file框的value值获取出来放到虚拟的左边框里，这需要用到js操作。具体做法如下：
<div>
<input type=”file”/>
<div> </div>
<div><input value=”浏览。。。”/><input type=”button” value=”上传”/><div> </div></div>
</div>
.leftpart1_putfile{
position:relative;width:320px;height:20px;margin-top:30px;
}
.leftpart1_putfile .input_file{
display:block;position:absolute;width:190px;height:22px;line-height:20px;top:0;left:82px;filter:alpha(opacity:0);opacity:0;z-index:1;cursor:pointer;
}
.leftpart1_putfile .showfile{
position:absolute;top:0;left:14px;cursor:pointer;
}
.leftpart1_putfile .showfile .file_con{
float:left;width:186px;height:20px;background:none;border:1px #A0D6FD solid;background-color:#EEEFF0;line-height:20px;cursor:pointer;
}
.leftpart1_putfile .showfile .file_btn{
width:66px;height:19px;background:url(../images/er_btnfan.gif) -1px -1px no-repeat;border:none;margin-left:5px;display:inline;color:#333;cursor:pointer;
}
js部分：
$(function(){
$(“.input_file”).change(function(){
$(“.file_con”).val($(“.input_file”).val());
});
});
解决绝对地位DIV 在相对定位的上层
<div 相对 只要这一个给z-index:正值>
<div 绝对>放弹出来东西</div>
</div>
div+css 布局下兼容IE6 IE7 FF常见问题 收藏
所有浏览器 通用 （市面上主要用到的IE6 IE7 FF）
height: 100px;IE6 专用
_height: 100px;IE6 专用
*height: 100px;IE7 专用
*+height: 100px;IE7、FF 共用
height: 100px !important;
PNG24IE6透明。。。
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’); /* IE6 */
_ background-image: none; /* IE6 */
CSS实现提示框
当鼠标移动到链接上方，会自动出现一个提示框:
<a href=”#”>Link<span>Tooltips</span></a>
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
