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

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

http://www.cnscn.org 2008-4-23 23:22:38 深山行者 字体:  浏览 4007 我要评论
  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学习
网站信息
网站类信息
更多>>同类信息
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
IE6不支持png24的解决办法(png24做为css的背景)
Ads loading...
更多>>最新添加文章
ASP连接各种数据库的方法
asp获得系统Unix时间戳与将Unix时间戳转为正常日期
关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案
access数据库做的网站出现.ldb不能删除超过2KB之后就会网站访问不了数据库,提示数据库不存在
asp中最难发现的错误由最简单的程序引起
Asp得到当月天数的函数方法
在服务器上新建网站,在服务器用域名能访问,但是外网访问不了的解决办法
深山旅行社网站管理系统5.0发布
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
添加一个防下载字段(长二进制数据)来防止ACCESS数据库被下载
网页制作,改变你的思维方
javascript根据内容转换为拼音
启动旅行社管理系统3.0的开发服务
CSS编写中灵活运行注释的意义
利ASP里的FOS导出WORD或Excel文档(本人测试成功)
生成随机字符串的函数,可以做为验证码一类的使用
html中meta标签详解
Ads loading...