`
孤独舞者
  • 浏览: 86236 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

height:auto firefox解决方案

阅读更多
做一个网页。就会遇见firefox与iE css的兼容问题
今天俺就发现了。
父div 设置了height:auto 在IE中设置没问题,但是到firefox中父div却没有增加,,,
看网上说 加入 min-height:10px; height:auto !important 但是该设置在子div出现float的时候还是不行。原因貌似是 当auto计算的是非float类型的高度。所以。。。。。
没办法设置为 height:100%  overflow:auto 这样就可以。不清楚回家看看详细。。。。

还有就是css太恶心了。就是一个中文符号让俺找了半天。。。晕。。。。

补充内容:
至于上面的解决方法能解决暂时的问题,但是看逻辑或者其他东西暂时看不懂,又请教了一下。 对此div修改一下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.clear { clear:both; margin:0px; top:0px}
    </style>
<title>Just a test</title>

</head>
<body>
<center>


<!--  mainLogo  begin -->
<div class="mainlogo">
mainlogo
</div>
<!--  mainLogo  end-->

<!-- mainBody  begin -->
<div class="mainBody">

 
<!-- mainBodyLeft  begin-->
<div class="mainBodyLeft">

</div>
<!--  mainBodyLeft end-->

<!-- mainBodyRight begin-->
<div class="mainBodyRight">
  this is the right
</div>
<!-- mainBodyRight end-->


// 注意这里是解决的办法。加入一个clear div clear定义在上面
<div class="clear"></div>
</div>
<!-- mainBody  end-->

</center>

</body>
</html>


对与clear属性的说明:
clear:该属性的值指出了不允许有浮动对象的边。

这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除clear:both;

这个解释和可以。而且理解也可以呵呵、。就是他了、、、、当初看auto的时候里面也提到了
不认识别设置float属性的 div这样就解决了。。。。。
希望能给大家一小点点帮助呵呵 以后不必为float 属性发愁了呵呵。。。
1
0
分享到:
评论

相关推荐

    ff浏览器下兼容height:auto的问题

    可以解决dw中height:auto在ff浏览器下无效的问题,完美兼容各个浏览器可以解决dw中height:auto在ff浏览器下无效的问题,完美兼容各个浏览器

    vue中设置height:100%无效的问题及解决方法

    主要介绍了vue中设置height 100%无效的问题及解决方法,需要的朋友可以参考下

    react-auto-height:动画的高度

    一个对height: auto进行动画处理的React组件height: auto使用CSS过渡,在更改其子元素的内容时height: auto为其子元素。 浏览器不支持从高度和宽度到auto值的转换,请参阅W3C问题进行讨论。 该组件实现了一个受...

    深入理解CSS的height:100%和height:inherit之间的使用区别

    inherit确实是个好东西,不仅节约代码,尤其与...1. 兼容性差异height:100% IE6+ √height:inherit IE8+ √ 2. 大多数情况作用是一样的除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由

    前端工具 - CSS格式化工具

    height:auto;} 单行格式化效果:body{background:url('http://cssjidi.com/logo.png');width:100px;height:50px;} p{font-size:14px;width:1000px;height:auto;} 多行格式化效果: body { background:url('...

    css十步搞定

    Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content 4.Sidebar 边框,一些...

    autoHeightTextarea自适应高度的textarea是一款jquery插件

    autoHeightTextarea自适应高度的textarea是一款jquery插件,支持链式调用,支持设置最小行数、最小高度、最大行数和最大高度,在输入文字的时候实现textarea的高度自适应

    important的妙用解决firefox和ie的css兼容问题

    对于某些内容可变的层(比如用户评论),我们希望它有个最小的高度 (比如30px),这样的话,即使内容只有一行... height:auto !important; height:30px; } 第一行设置 min-height:30px;对Firefox有效;第二行height:a

    初写静态网页

    height: auto; margin: 0; padding: 0; float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } .tcontain { width: 120px; height: 3px; padding: ...

    记录微信小程序 height: calc(xx – xx);无效问题

    遇到一个小问题,记录一下 问题:在微信小程序中...解决办法:直接在最大的view标签中设置高度为百分百即可 &lt;!-- 视频列表 --&gt; page { height: 100%; } .videoList { height: calc(100% - 480rpx); }

    line-height全面解析

    line-height全面解析line-height全面解析li

    JS全屏放大

    height: 54px; width:100%; min-width:960px; clear:both; background:#666; text-align:center; color:#fff; } #infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;} #...

    IE 6不支持min-height或max-width等属性的完美解决方案

    又是IE6!!!坑人的IE6,不支持min-height,但是实际操作中,这个属性是非常需要的。...复制代码代码如下: height:auto !important; height:100px; min-height:100px; 这三句话,可以实现IE6下面min-height值为 100p

    好看的动漫网页

    height: 578px; } body { font-size:12px; width:760px; margin:0 auto; background:url(images/bg.gif); color:#333; position:relative; } #main { width:761px; height:1070px; margin:0 auto; }...

    react-slidedown:React组件,该组件使用CSS从当前高度到{

    React组件使用CSS从当前高度到height: auto为子代设置动画height: auto安装/更新/卸载时为height: auto 。 概述 CSS当前不支持将元素的高度设置为height: auto ,因此通常使用javascript实现此效果。 该组件使用CSS...

    opencv显示 rtion failed) size.width>0 && size.height>0 in function ‘cv::imshow’的解决方案vscode

    python语言使用opencv遇到rtion failed) size.width&gt;0 && size.height&gt;0 in function ‘cv::imshow’的解决方案(win10操作系统,vscode编辑) 在用opencv读取并显示图像时: 出现如题报错,提示为未在指定路径下...

    pic_slide.rar

    margin:50px auto 0px;position:relative} .pic_lists{float:left;width:8888px;height:106px;overflow:hidden;position:absolute;top:0px;left:0px} .btn_change{width:40px;height:60px;position:absolute;text-...

    实时翻译系统html5源码

    height:auto;border:1px solid #434343;display:none;background:#fff;color:#fff;line-height:40px} .wrap .language .languages ul li{float:left;width:78px;height:40px;margin:4px; border:1px dashed #ccc;...

    js-transition-auto:将元素的widthheight设置为与它在auto处的计算值相同,以便CSS widthheight过渡有效

    自动过渡CSS过渡不适用于具有height: auto元素。 他们可以种与实现max-height: some-fixed-height ,但过渡时间是永远正确的。 此函数将元素的宽度/高度设置为与auto其计算值相同,以便CSS宽度/高度过渡有效(在CSS...

Global site tag (gtag.js) - Google Analytics