css3 常见问题

doramart2015-08-14 08:49:35

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下正常

所有文章未经授权禁止转载、摘编、复制或建立镜像，违规转载法律必究。

举报邮箱：doramart@qq.com