做一个网页。就会遇见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 属性发愁了呵呵。。。
分享到:
相关推荐
可以解决dw中height:auto在ff浏览器下无效的问题,完美兼容各个浏览器可以解决dw中height:auto在ff浏览器下无效的问题,完美兼容各个浏览器
主要介绍了vue中设置height 100%无效的问题及解决方法,需要的朋友可以参考下
一个对height: auto进行动画处理的React组件height: auto使用CSS过渡,在更改其子元素的内容时height: auto为其子元素。 浏览器不支持从高度和宽度到auto值的转换,请参阅W3C问题进行讨论。 该组件实现了一个受...
inherit确实是个好东西,不仅节约代码,尤其与...1. 兼容性差异height:100% IE6+ √height:inherit IE8+ √ 2. 大多数情况作用是一样的除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由
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('...
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插件,支持链式调用,支持设置最小行数、最小高度、最大行数和最大高度,在输入文字的时候实现textarea的高度自适应
对于某些内容可变的层(比如用户评论),我们希望它有个最小的高度 (比如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: ...
遇到一个小问题,记录一下 问题:在微信小程序中...解决办法:直接在最大的view标签中设置高度为百分百即可 <!-- 视频列表 --> page { height: 100%; } .videoList { height: calc(100% - 480rpx); }
line-height全面解析line-height全面解析li
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;} #...
又是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组件使用CSS从当前高度到height: auto为子代设置动画height: auto安装/更新/卸载时为height: auto 。 概述 CSS当前不支持将元素的高度设置为height: auto ,因此通常使用javascript实现此效果。 该组件使用CSS...
python语言使用opencv遇到rtion failed) size.width>0 && size.height>0 in function ‘cv::imshow’的解决方案(win10操作系统,vscode编辑) 在用opencv读取并显示图像时: 出现如题报错,提示为未在指定路径下...
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-...
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;...
自动过渡CSS过渡不适用于具有height: auto元素。 他们可以种与实现max-height: some-fixed-height ,但过渡时间是永远正确的。 此函数将元素的宽度/高度设置为与auto其计算值相同,以便CSS宽度/高度过渡有效(在CSS...