css3 常见问题
css小技巧集锦,css3目测在今后的移动开发中会占据重要的位置,移动开发才刚起步,还有很多细节需要深入研究。这里汇集我平时在做移动开发中遇到的一些特殊性的问题,为今后开发提供帮助。
1、box-sizing: content-box|border-box|inherit
以前用到过,今天碰到又差点忘记了,在firefox下 结构如下:
<li class="selected"><a>公告</a></li> <li><a>制度</a></li> <li><a>学堂</a></li> <li><a>服务商风采</a></li> <li><a>服务厅</a></li>
分别设置 li 和 a 的高度:
.tabpanel-c>.tabp-head ul li{height: 2.5em; line-height: 2.5em; list-style-type: none; color: #7e7e7e; cursor: pointer; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; text-align: center;} .tabpanel-c>.tabp-head ul li a{display: inline-block;} .tabpanel-c>.tabp-head ul li.selected{color: #d03737;} .tabpanel-c>.tabp-head ul li.selected a{ height:2.5em; border-bottom: 2px solid #d03737; box-sizing:border-box;}
如果不设置box-sizing属性,a的边框会把li撑下去,是不合理的,在chrome下正常
很赞哦! ( 0
)
相关文章
- Node.js API实例讲解——https服务器与客户端
- Node.js API实例讲解——FS文件系统概述
- Node.js API实例讲解——进程的操作
- Node.js API实例讲解——二进制类型转换
- Node.js API实例讲解——创建UDP服务器
- Node.js API实例讲解——EventEmitter
- Node.js API实例讲解——Buffer是什么
- Node.js API实例讲解——Buffer的读取方法
- 树莓派 (为学生计算机编程教育设计的一种卡片式电脑)
- 图标字体化浅谈
- Node.js API实例讲解——其他工具模块
- NodeJs利用七牛云存储实现图片上传缩略图生成等操作