现在的位置: 首页 > 综合 > 正文

使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu

2013年09月08日 ⁄ 综合 ⁄ 共 1265字 ⁄ 字号 小 中 大 ⁄ 评论关闭

使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu

 闲着发疯, 使用 IE 条件注释+DIV+CSS 模拟了个表格布局, 兼容我认为是主流浏览器的浏览器....没了.
 
 目录:
 1. 内容
 
 shawl.qiu
 2006-12-17
 http://blog.csdn.net/btbtd
 
 1. 内容

  1.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <!--[if IE]>
  3. <style type="text/css">
  4. .table {
  5.  display:inline;
  6.  border-top:1px solid black;
  7.  border-right:1px solid black;
  8. }
  9. .row {
  10.  border-left:1px solid black;
  11. }
  12. .cell {
  13.   border-right:1px solid black;
  14.  border-bottom:1px solid black;
  15.  width:24%;
  16.  overflow:hidden;
  17.  display:inline;
  18. }
  19. </style>
  20. <![endif]-->
  21. <!--[if !IE]><-->
  22. <style type="text/css">
  23. .table {
  24.  display:table;
  25.  border-top:1px solid black; 
  26.  border-left:1px solid black;
  27.  width:96%;
  28. }
  29. .row {
  30.  display:table-row;
  31. }
  32. .cell {
  33.  display: table-cell;
  34.  border-right:1px solid black;
  35.  border-bottom:1px solid black;
  36.  width:24%;
  37. }
  38. </style>
  39. <!--><![endif]-->
  40. <div class="table">
  41.  <div class="row">
  42.   <div class="cell">aaa</div>
  43.   <div class="cell">bbbbbbbbbbbbbbbb</div>
  44.   <div class="cell">ccc</div>
  45.   <div class="cell">d</div>
  46.  </div>
  47.  <div class="row">
  48.   <div class="cell">aaa</div>
  49.   <div class="cell">bbbbbbbbbbbbbbbb</div>
  50.   <div class="cell">ccc</div>
  51.   <div class="cell">dddddddddddddddd</div>
  52.  </div>
  53.  <div class="row">
  54.   <div class="cell">aaa</div>
  55.   <div class="cell">bbbbbbbbbbbbbbbb</div>
  56.   <div class="cell">ccc</div>
  57.   <div class="cell">dddddddddddddddd</div>
  58.  </div>
  59. </div>

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞