文章分类 Classification
CSS技巧和经验
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-10-11 阅读次数: 52 查看权限: 游客查看
CSS技巧和经验
1、如何在IE6及更早浏览器中定义小高度的容器？
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
/*IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高*/
2、如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？
.test{display:inline;}
/*当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可。*/
3、如何在IE6及更早浏览器下模拟min-height效果？
#test{min-height:100px;_height:100px;}
/*注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效*/
4、如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？
input,button{overflow:visible;}
5、如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？
li{vertical-align:top;}
/*除了top值，还可以设置为text-top | middle | bottom | text-bottom*/
6、如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？
div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}
/*解决方法是为容器内的链接定义相对定位属性position的值为relative*/
7、如何清除图片下方出现几像素的空白间隙？
img{display:block;}
img{vertical-align:top;}
#test{font-size:0;line-height:0;}
/*#test为img的父元素
以上三个方法皆可
*/
8、如何让文本垂直对齐文本输入框？
input{vertical-align:middle;}
9、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
/*按L-V-H-A的顺序设置超链接样式即可*/
10、如何使文本溢出边界显示为省略号？
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
11、如何让某个元素充满整个页面？
html,body{height:100%;margin:0;}
#test{height:100%;}
12、如何去掉超链接的虚线框？
a{outline:none;}
/*IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"...*/
13、如何容器透明，内容不透明？
方法1：
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上
方法2：
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
<div class="outer">
<div class="inner">我是不透明的内容</div>
</div>高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果
14、如何让整个页面水平居中？
body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}
15、如何在文本框中禁用中文输入法？
input,textarea{ime-mode:disabled;}
/*ime-mode为非标准属性，写该文档时只有IE和Firefox支持*/
关键词: css,css技巧 编辑时间: 2013-10-11 12:07:10
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
0%(0)
0%(0)
中搜索：
中搜索：
- 暂无评论
文章图片 article Pictrue
网友评论