在firefox中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
以上边缘为例:
<div style="background-color:green; color:white;" >绿色</div>
<div style="background-color: black;height:300px; padding-top:0px;">
<div style="background-color: black;height:300px;">
<div style="margin-top:50px;height:150px; background-color:red; color:white;">红色</div>
</div>
</div>
在Firefox中绿色和红色div之间会有50px的白色空隙,而在IE中则为黑色。
解决方法:
1、给红色div的样式增加float属性,例如float:left; width:100%;
2、修改任一黑色div的padding属性为非0值,例如padding-top:1px;
3、红色div上方增加非空元素,例如<div style="height:0;"> </div>
4、当然对于这个例子可以直接用给黑色div的padding-top来取代红色div的margin-top……
分享到:
相关推荐
Firefox下margin-top 会将上级DIV也往下移.
定位层被遮的问题,特别是在火狐和IE的区别
最近发现好多用margin-top实现的,上边距效果一直没有,一直都不知道什么原因,今天偶然看到了,特分享给大家
之前未解决兼容火狐的问题, 要兼容火狐请代码中XMLHttp.readystate=4更改为XMLHttp.readyState=4 另var key=lis[i].innerHTML.substring(0,lis[i].innerHTML.indexOf("<SPAN>"));这一行更改为: var key=lis[i]....
一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用...
JavaScript事件监听完整实例(含注释) * { margin:0px; padding:0px; } ...margin-top:4px; border:solid 1px blue; width:100px; float:left; } pre{ margin:20px 0 0 0; } a { text-indent:4em;
现在用脚本控制 html 元素样式的方法真的很多很多。 对单个元素可以直接 element.style.display=……修改一个样式,也可以 element.className=…修改它...} input{background-color:gray} button{margin-top:70px;
jQuery中animate()的方法 用于创建自定义动画的函数。 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的...
代码如下: $(function () { if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之类浏览器 $(“.productli img”).each(function () { var margin = 120 – $(this).height();...
复制代码代码如下: <style type=”text/css”> body{font-size:24px; font-family:Tahoma;...在实际运用中会出现firefox与ie效果不同的情况这时候需要 复制代码代码如下: .comm_check{margin:2px
+去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...
掌握文本控制相关的属性 掌握CSS属性继承的概念并能够合理应用 掌握背景控制相关的CSS属性 掌握列表相关的CSS属性 熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用 了解常见的CSS设计技巧(CSS Hacks)和设计...
功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性...
+去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...
本文我们制作一下子栏目资讯内容,供大家参考,具体内容如下 谷歌浏览器解析的顺序调整,需要全部加载后执行 ...注:对于 Firefox 浏览器,可以按 Ctrl+Shift+M,调整移动端尺寸。 子栏目标题 <hgroup>
:warning: 未维护! 在浏览器实现position: sticky时,Stickyfill表现... 仅适用于具有指定top元素模仿本地的top和margin-bottom行为, 与表格单元格一起使用为了保持一致性,删除了该文件,直到Firefox它没有不支持
.testCaseLink, .testCaseLinkSelected { margin-top: 2px; padding: 4px; cursor: pointer; } .testCaseLink { background-color: #f6f6f6; } .testCaseLinkSelected { background-color: lightblue; border: ...
margin: 0 auto; border: solid 1px #d4d0c8; } .winUI tr td, .winUI thead td, tfoot td { border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; border-bottom: 1px solid ...
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.其他浏览器访问。 使用方法: 1、下载客服插件先解压,把解压文件上传到网站默认风格的摸版里面,把客服插件中三个文件夹上传至网站...