Firefox float

最新推荐文章于 2019-02-28 17:44:37 发布
最新推荐文章于 2019-02-28 17:44:37 发布
阅读量63 收藏
点赞数
分类专栏： HTML　CSS　JS 文章标签： Firefox IE Java CSS
做一个左右结构的页面，左边导航，右边显示内容，使用div+css，过程中发现ff和IE效果不一样
原始代码如下： 

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

            div.d1 {
                float: left;
                width: 18%;
                background-color: red;
            }

            div.d2 {
                width: 80%;
                float: right;
                background-color: green;
            }

            div.d3 {
                background-color: blue;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div class="d3">
            <div class="d1">
                <ul>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                </ul>
            </div>
            <div class="d2">
                Content
            </div>
        </div>
		Other Content
    </body>
</html>


此时，IE效果正常，ff不正常。d3的高度不会自动进行调整，"Other Content"会显示在d2下面，而不是d3下面。

代码改成 

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

            div.d1 {
                float: left;
                width: 18%;
                background-color: red;
            }

            div.d2 {
                width: 80%;
                float: right;
                background-color: green;
            }

            div.d3 {
                background-color: blue;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div class="d3">
            <div class="d1">
                <ul>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                    <li>
                        <a href="#">Link A</a>
                    </li>
                </ul>
            </div>
            <div class="d2">
                Content
            </div>
	    <div style="clear:both"></div>
        </div>
		Other Content
    </body>
</html>

FF，IE全部正常。 

<div style="clear:both"></div>

增加了这一行。
 
thinkforever
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
firefox不显示border通过清除float便可解决
12-13
主要是float属性引起的，清除float的就可以了。 比如： 复制代码代码如下: ”box_left”></div> ”box_right”></div> ”box_bottom></div> 这个结构，box_left和box_right左右浮动，box_bottom有border，在IE下...
解决float布局下firefox火狐缩小导致div下沉的问题
小菜鸡程序媛的挣扎史
07-24 319
FIFEFOX缩放时效果变化 CHROME缩放效果 判断原因 经过多次试验，应该是在firefox中缩放时border的值引起的问题。因为存在border在缩放时，里面的div不能刚好占据足够的位置，由于float的特性就会下沉。即使数值计算刚好也会发生下沉的问题。 解决方案 1、在item的div中加入 box-sizing: border-box; 这条属性消除b...
Firefox下使用float:right换行问题
qingyuexiao的专栏
05-24 517
     今天遇到一个很奇怪的问题，使用float:right时，在Firefox中显示到了下一行（不是内容过长），而在Chrome和IE（10、11）中都是正常的。代码类似如下：    &lt;div&gt; &lt;span&gt;logo&lt;/span&gt; &lt;span&gt;name&lt;/span&gt; &lt;div style="displa...
Firefox float bug? How do I get my float:right on the same line?
Yang Yong 的博客
02-28 201
问题描述 Firefox float bug? How do I get my float:right on the same line? 解决方法 在父节点加入： white-space: normal; 参考 [1] https://stackoverflow.com/questions/26306864/firefox-float-bug-how-do-i-get-my-floatrigh...
【原创】今天发现CSS上的一点使用FLoat要注意的地方（FireFox＋IE）
goody9807的专栏
07-17 1264
 有两个div.left{    float:left;    width:20%;    border:solid 1px red;}.Right{    float:right;    width:76%;}在firefox下右边框css设置只能用float：right ，IE下可以用float：left设置完后 在IE下发现是正常显示的,但是在firefox下看左边的就差了那么点，后来把
javascript css styleFloat和cssFloat
10-29
在写js操作css的过程中发现float属性在IE和firefox下对应的js脚本是不一样的，IE下对应得是 styleFloat，firefox,chorme,safari下对应的是cssFloat，可用in运算符去检测style是否包含此属性。
li在ie/firefox浏览器中行高不一致解决方法(浏览器兼容)
12-13
复制代码代码如下: <...}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_freeline_list li strong{float:right;font-size:12px;}</style><ul cla
Firefox div高度自适应
12-09
但是一旦设置了 height以后，FIrefox就不会自适应div的高度了。所以只能两个属性都不用，干干净净地写<div>Jimbor Studio。 2.即使不设置固定高度，Firefox对高度的自适应也不那么尽人意。如果需要在一个层内嵌套一...
FireFox网页布局时候内容需自动换行时float属性不起作用
铭心工作室
04-25 2603
      使用Dreamweaver8编写如下代码： DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>me
CSS <hr>标签在float布局中Firefox和Chrome的差异
dfQ_Qjb的博客
04-21 2259
CSS <hr>标签在float布局中Firefox和Chrome的差异
CSS div float IE和FireFox的兼容性问题
黑色空间
05-22 3900
在IE中，只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性而在FF中，第一个指定后 其后的div也随着平移，所以可以在同级的float加上.clear{ clear:both;}  ,  CSS中 height: 19px !important; height: 21px;  在IE是不认important的，如果属性重复，默认截取最后一个。而在FF中impor
微信小程序-leantodu小程序项目源码-原生开发框架-含效果截图示例.zip
05-26
微信小程序凭借其独特的优势，在移动应用市场中占据了一席之地。首先，微信小程序无需下载安装，用户通过微信即可直接使用，极大地降低了使用门槛。其次，小程序拥有与原生应用相近的用户体验，同时加载速度快，响应迅速，保证了良好的使用感受。此外，微信小程序还提供了丰富的API接口，支持开发者轻松接入微信支付、用户授权等功能，为开发者提供了更多的可能性。 微信小程序-项目源码-原生开发框架。想要快速打造爆款小程序吗？这里有一份原生开发框架的项目源码等你来探索！基于微信小程序的强大生态，这份源码将带你领略原生开发的魅力，实现快速迭代与高效开发。从用户授权到微信支付，从界面设计到功能实现，一切尽在掌握。赶快下载查看，让你的小程序项目在竞争激烈的市场中脱颖而出！
微信记账类小程序源码下载
05-26
一款实用的记账列表，分类记账，生活记账小程序工具。包含：添加记账、编辑记账、统计分析、计算器等4个页面。
libaacs-0.11.1-1.mga9.i586.rpm
05-26
安装：rpm -i xx.rpm
libaa1-1.4.0-1.2.armv7hl.rpm
05-26
安装：rpm -i xx.rpm
医师资格实践技能考试考官执考情况说明.docx
05-26
医师资格实践技能考试考官执考情况说明.docx
ipython-8.13.1.tar.gz
最新发布
05-26
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
firefox火狐浏览驱动
08-01
Firefox浏览器的驱动是用来与Selenium库一起使用的，以便自动化测试和控制浏览器的行为。要安装Firefox浏览器的驱动，可以按照以下步骤进行操作： 1. 首先，不需要查看浏览器版本号，直接下载对应自己操作系统的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值