CSS技巧和经验

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-11   阅读次数: 67   查看权限: 游客查看

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)
上一篇:3D图片切换推荐
下一篇:webGL学习
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐