如何防止在缩小firefox缩放时浮动布局换行 [英] How to prevent the floating layout wrapping when firefox zoom is reduced
本文介绍了如何防止在缩小firefox缩放时浮动布局换行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
给出以下HTML。它显示两列： #left ， #right 。两者都是固定宽度，有1px的边框。宽度和边框等于上容器的大小： #wrap 。
Given the following HTML. It display two columns: #left, #right. Both are fixed width and have 1px borders. Width and borders equal the size of upper container: #wrap.
当我缩小Firefox 3.5.2按Ctrl + - 列包装（演示）。
When I zoom out Firefox 3.5.2 by pressing Ctrl+- columns get wrapped (demo).
如何防止这种情况？
<!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>
推荐答案
尝试切换到其他框模型如下：
#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
}
这篇关于如何防止在缩小firefox缩放时浮动布局换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
