加载中…
正文 字体大小:

display之种种怪象

(2012-05-22 13:00:01)
标签:

杂谈

分类: 和工作有关
display不好研究,欠这个课题快一年了都。
谈不上研究,以下是在工作中遇到的问题总结:
1、某容器使用display:table-cell,或者display:inline时,无法使用margin:0 auto实现其居中。
2、某元素若同时使用了display:table-cell和float属性,在IE6下不会产生浮动双边距。

补课:(2012-12-26)
看到一个很蛋疼的例子,就是利用display的属性用DIV做一个很蛋疼的表格:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>display_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body{font:14px/1.5 georgia,simsun,arial;}
h1{margin:10px 0;font-size:20px;}
ul{margin:0;padding:0;list-style:none;}
.table{display:table;border-collapse:collapse;border:1px solid #ccc;}
.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}
.table-column-group{display:table-column-group;}
.table-column{display:table-column;width:100px;}
.table-row-group{display:table-row-group;}
.table-row{display:table-row;}
.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}
.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}
.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}
.table-footer-group{display:table-footer-group;}
</style>
</head>
<body>
<h1>display构造的table小例子,IE7及以下浏览器不支持本示例</h1>
<div class="table">
    <h2 class="table-caption">花名册:</h2>
    <div class="table-column-group">
        <div class="table-column"></div>
        <div class="table-column"></div>
        <div class="table-column"></div>
    </div>
    <div class="table-header-group">
        <ul class="table-row">
            <li class="table-cell">序号</li>
            <li class="table-cell">姓名</li>
            <li class="table-cell">年龄</li>
        </ul>
    </div>
    <div class="table-footer-group">
        <ul class="table-row">
            <li class="table-cell">footer</li>
            <li class="table-cell">footer</li>
            <li class="table-cell">footer</li>
        </ul>
    </div>
    <div class="table-row-group">
        <ul class="table-row">
            <li class="table-cell">1</li>
            <li class="table-cell">John</li>
            <li class="table-cell">19</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">2</li>
            <li class="table-cell">Mark</li>
            <li class="table-cell">21</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">3</li>
            <li class="table-cell">Kate</li>
            <li class="table-cell">26</li>
        </ul>
    </div>
</div>
</body>
</html>
居然显示出来了,很神奇,也很蛋疼:
display之种种怪象

附相关属性:
none:
隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:
指定对象为内联元素。
block:
指定对象为块元素。
list-item:
指定对象为列表项目。
inline-block:
指定对象为内联块元素。(CSS2)
table:
指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
inline-table:
指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
table-caption:
指定对象作为表格标题。类同于html标签<caption>(CSS2)
table-cell:
指定对象作为表格单元格。类同于html标签<td>(CSS2)
table-row:
指定对象作为表格行。类同于html标签<tr>(CSS2)
table-row-group:
指定对象作为表格行组。类同于html标签<tbody>(CSS2)
table-column:
指定对象作为表格列。类同于html标签<col>(CSS2)
table-column-group:
指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
table-header-group:
指定对象作为表格标题组。类同于html标签<thead>(CSS2)
table-footer-group:
指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
compact:
分配对象为块对象或基于内容之上的内联对象(CSS3)
run-in:
分配对象为块对象或基于内容之上的内联对象(CSS3)
ruby:
将对象作为表格脚注组显示(CSS3)
ruby-base:
将对象作为表格脚注组显示(CSS3)
ruby-text:
将对象作为表格脚注组显示(CSS3)
ruby-base-group:
将对象作为表格脚注组显示(CSS3)
ruby-text-group:
将对象作为表格脚注组显示(CSS3)
box:
将对象作为弹性盒模型显示(CSS3)
inline-box:
将对象作为内联块级弹性盒模型显示(CSS3)

  • IE7及以下浏览器不支持table相关的参数值,如:table, inline-table, table-caption, table-cell, table-row, table-row-group, table-column, table-column-group, table-footer-group, table-header-group
  • 写本文档时尚无浏览器支持ruby相关的参数值,如:ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group
  1. IE7及更早浏览器只支持none | inline | block | inline-block | list-item参数值。
  2. Firefox4.0-6.0不支持所有的CSS3新增属性值。
  3. Safari5.1不支持CSS3新增属性值:ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。
  4. Chrome13.0不支持CSS3新增属性值:ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。
  5. Opera10.50-10.51不支持CSS3新增属性值:ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。
  6. IE8不支持CSS3新增属性值:compact | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。
  7. IE9不支持compact | box | inline-box属性值。

做过实验:table-footer-group永远居底,同样,table-header-group永远居上。和书写顺序无关。

嗯,新特性不少。只是我在想,莫非接下来要干掉table标签吗?不然怎么这么多和table相关的属性?上面的表格有什么优势吗?代码精简?NO。更语义化?DIV当然比不上table。




0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有