如何防止在火狐浏览器缩放比例降低时浮动布局被包裹?[英] How to prevent the floating layout wrapping when firefox zoom is reduced

本文是小编为大家收集整理的关于如何防止在火狐浏览器缩放比例降低时浮动布局被包裹?的处理方法,想解了如何防止在火狐浏览器缩放比例降低时浮动布局被包裹?的问题怎么解决?如何防止在火狐浏览器缩放比例降低时浮动布局被包裹?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

给定以下HTML.它显示两列:#left,#right.两者都是固定宽度,具有1PX边界.宽度和边界等于上容器的大小:#wrap.

当我通过按Ctrl+ - 列缩小Firefox 3.5.2时,将包装( demo ).<)./p>

如何防止这种情况?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      div           {float:left}
      #wrap         {width:960px}
      #left, #right {width:478px;border:1px solid}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
  </body>
</html>

推荐答案

尝试切换到其他 box型号如下:

#left, #right 
{ 
  width:480px;
  border:1px solid;
  box-sizing: border-box;

  /* and for older/other browsers: */
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box
}

其他推荐答案

dmitri,

当浏览器在变焦后将div的新宽度归类时,它没有按比单个960px成比例地减少边框元素的两个478px+4px.因此,您最终得到了:

您的原始样式:

#wrap equals 960px wide
#left & #right, plus border equals 960px wide

一切都很好.

缩放减少(ctrl-)

#wrap equals (approx.) 872px wide.
#left, #right, plus border eqauls 876px wide.
(left and right reduce to approx 436px each, plus 4 px of border)

内容太宽,无法#wrap.要查看和测量此内容,只需将背景颜色应用于#wrap.

要修复,请从#wrap中删除宽度.因为它是漂浮的,所以它会适合内容物.但是,您应该将宽度应用于浮动元素,而您的div {float:left}将其应用于#wrap.

删除样式div {float:left}并添加float:左至#left,#right.

#left, #right {float:left;width:478px;border:1px solid}

如果要#wrap居中,那么您需要再次声明它的宽度并添加保证金:0自动;,在这种情况下,您将再次遇到此问题[编辑:或者您可以,您可以,克里斯表示,将宽度设置为100%].因此,只需重新计算#left的宽度,#right才能适合它们.

我的理解是,在父母和子女元素的宽度之间留下一点呼吸空间,无论如何都可以避免这种问题.

其他推荐答案

我遇到了上述相同的问题.之后,无可救药地在互联网上徘徊了几分钟,我发现这显然是Firefox 3.5.x和IE 7/8中的错误.该错误仍然存​​在.

要查看有关该错误的更多信息: http://markasunread.com/?p=61 (以前 http:http:http:http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-border/)

本文地址:https://www.itbaoku.cn/post/565779.html