收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2120|回复: 3

[讨论] position: relative 不留空的问题[已解决]

[复制链接]
发表于 2009-3-12 14:47:11 | 显示全部楼层 |阅读模式
在ff下面没问题。IE6下面限制高度也不会显示成正常的20px

test.html:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Untitled Document</title>
  6.         <link rel="stylesheet" type="text/css" href="test.css">
  7.     </head>
  8.     <body>
  9.         <div id="all">
  10.             <div id="mc0_id_color">
  11.             </div>
  12.             <div id="mc1_id_color">
  13.             </div>
  14.             <div id="mc2_id_color">
  15.             </div>
  16.         </div>
  17.     </body>
  18. </html>
复制代码


test.css

  1. #all {
  2.     width: 400px;
  3.     height: 20px;
  4.     background-color: #444444;
  5. }

  6. #mc0_id_color {
  7.     width: 150px;
  8.     height: 20px;
  9.     font-size: 0px;
  10.     background-color: red;
  11.     text-align: center;
  12.     cursor: Default;
  13.     position: relative;
  14. }

  15. #mc1_id_color {
  16.     width: 150px;
  17.     height: 8px;
  18.     font-size: 0px;
  19.     background-color: blue;
  20.     text-align: center;
  21.     cursor: Default;
  22.     top: -14px;
  23.     position: relative;
  24. }

  25. #mc2_id_color {
  26.     width: 10px;
  27.     height: 20px;
  28.     font-size: 0px;
  29.     background-color: green;
  30.     text-align: center;
  31.     cursor: Default;
  32.     top: -28px;
  33.     left: 10px;
  34.     position: relative;
  35. }
复制代码


thx!!!!

[[i] 本帖最后由 wolf2999 于 2009-3-13 10:27 编辑 ]
发表于 2009-3-12 16:25:54 | 显示全部楼层
不是relative的问题。

首先IE的容器高度会自动伸缩,而FF不会,所以IE的黑色背景会比FF的高,如果你把FF的#all高度设置成auto,你会发现FF的也会变长。
relative的定位本来就不会释放它原本的位置,所以IE和FF的relative都没有解析错误.
解决办法就是你给#all加上overflow吧,要么就不要用relative来定位,采用margin
回复 支持 反对

使用道具 举报

发表于 2009-3-13 09:41:17 | 显示全部楼层
其实这个布局没有必要用relative来定义啊
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-13 10:27:12 | 显示全部楼层
overflow:hidden

已经解决。thx各位。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-19 02:19 , Processed in 0.110073 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表