HOME
BBS
深山帮帮欢迎您,您可以注册或者
qq登录只需一步,快速开始
深山旅行社网站管理系统开发完成,欢迎各位网友测试! 点这里测试
565449214 给站长留言
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

CSS设计中常见的精华问题收集

http://www.cnscn.org 2008-4-23 23:22:38 深山行者 字体:  浏览 4151 我要评论
  1. firefox下, 内容float时,父容器不能被撑开(闭合容器或清除浮动问题):<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>CSS代码如下:div {
        width:200px;
        border:1px solid red
        }
    p {
        float:left;
        width:100px;
        }现象:
    点击在新窗口中打开图片
    可以看到,父容器没有随着子容器而扩张。
    解决方法:(1)加入<div style="clear:both"></div>清除浮动。
    (2)为父容器也添加float:left;属性。
    (3).gainlayout{display:inline-block;} .gainlayout{display:block;}
  2. IE6的双倍边距BUG:
    在IE中,对一个div浮动时,并设定该div的margin时,会出现双倍的margin值。
    CSS代码:float:left;
        margin-left:100px;现象:
    点击在新窗口中打开图片
    解决方法:加上display:inline即可。
  3. IE6下图片下方有空隙:
    现象:
    点击在新窗口中打开图片
    解决方法:解决这个BUG的方法也有很多,可以是改变html的 排版,或者设置img 为display:block。
    或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
    都可以解决。
  4. IE6下这两个层中间有间隙:
    代码:<div class="left">aaaaaa</div>
    <div class="right">aaaaaa</div>CSS代码:.left {
        float:left;
        width:100px;
        height:100px;
        background:red
        }
    .right {
        width:100px;
        height:100px;
        background:orange
        }现象:
    点击在新窗口中打开图片
    解决方法:这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义“.left margin-right:-3px;”。
  5. FF下文本无法撑开容器的高度:
    CSS代码:div {
        width:200px;
        height:100px;
        border:1px solid red
        }现象:
    点击在新窗口中打开图片
    可以看到,当文字的 内容高度超过容器规定的高度时,容器不能自动撑开。
    解决方法:标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px;  这里为了照顾不认识min-height的IE6 可以这样定义:
    {
    height:auto !important;
    height:100px;
    min-height:100px;
    }
  6. IE6下容器的宽度BUG:
    现象:
    点击在新窗口中打开图片
    解决方法:
    (1)div
    {
      border: 20px;
      padding: 20px;
      width: 200px;
    }
    * html div
    {
      width: 280px;
      w\idth: 200px;
    }
    (2)div
    {
      border: 20px;
      padding: 20px;
      width: 200px !important;
      width: 280px;
      width/**/:/**/200px;
    }
    (3)div
    {
      border: 20px;
      padding: 20px;
      width: 200px !important;
      width /**/:280px;
    }
  7. IE6无法定义1px左右高度的容器:
    现象:
    点击在新窗口中打开图片
    解决方法:解决的方法有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
Ads loading...
相关阅读
( 2012-11-20 18:14:15 )在未知图片的宽度与高度时利用div+css将图片居中
( 2011-1-27 9:09:51 )JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
( 2010-7-6 10:43:51 )非常不错的支持各种浏览器的简易调色板
( 2010-7-4 16:55:59 )非常酷的javascript实现万年历功能
( 2010-7-2 13:05:11 )div+css黑色焦点图(幻灯片效果非常 不错)
( 2010-6-28 23:30:14 )特别简洁的简单JavaScript日历及说明
( 2010-4-6 15:19:23 )这个超级强的div+css图片大小自适应
( 2010-4-1 9:50:49 )倒计时广告/始终保持在网页中部
共有0条关于《CSS设计中常见的精华问题收集》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 400 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

Ads loading...
更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
Ads loading...
更多>>最新添加文章
asp中Request.ServerVariables能获取的信息整理总结
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
sql语句中怎么按照in语句里的id原有的顺序进行排序输出
通过设置iis的进程池让网站的并发数,性能提升几个档次
asp通过多次获得来取得用户的真实IP
通过XMLHTTP检查网站能否打开
asp利用sina提供的ip库端口来获得当前IP所有的地区,所在国,所在省,所在市,在线解析json
利用aspJpeg组件生成多图片水印组合时给加上透明水印图片
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
Div+CSS+JS树型菜单,可刷新
web2.0 div+css 设计中一些标准化学习指南
asp判断是否是手机访问
深山行者留言系统V2.0 (简称留言板V2.0)
26件网站推广网页优化必须的事情
页面里面的js和css的放的位置顺序与加载速度分析
ASP取得文件的名称.路径.建立日期.文件大小.文件类型
CSS编写过程中常见的10个错误
Ads loading...