css - 缩放页面 (ctr+ ctr-)，折叠模板

Question

我有固定宽度的三列的页面布局。请参阅以下 HTML 和 CSS 片段

在显示器的某些分辨率下(尤其是在 firefox 中)，当我缩放页面 (CTR-) 时，模板页面正在折叠。我找不到解决此问题的方法。

作为替代方案，我将 div.right-wrapper 和 div.right-column 的宽度减少了 1 px。但这并不完全符合规范。

有人有想法吗？谢谢。

<div class="main_content three-column">
      <div class="main_content_inner">
         <div class="left-column">
            <h1>Left column</h1>
         </div>
         <div class="right-wrapper">
            <div class="content-column">
               <h1>Content column</h1>
            </div>
            <div class="right-column">
               <h1>Right column</h1>
            </div>
            <div class="clr"></div>
         </div>
         <div class="clr"></div>
   </div>
</div>



.main_content.three-column {
    background: #fff;
    width: 998px;
    margin: 0 auto;
}

.main_content.three-column .main_content_inner {
    padding: 0 10px;
}

.left-column { 
    width: 199px;
    padding: 15px 10px 15px 0;  
    border-right: 1px solid #e8eaec;
    float: left; 
    background: red;
}

.right-wrapper { 
    width: 768px; 
    border-left: 1px solid #e8eaec;
    margin-left: -1px;  
    float: left;
}

.content-column {
    width: 558px;
    float: left;
    padding: 15px 10px;
    background: green;
}

.right-column {
   width: 190px;
   float: left;
   padding: 15px 0 15px 0;
   overflow: hidden;
   background: blue;
}

.clr {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.main_content.three-column h1 {
    font: normal 24px/12px Arial, Tahoma, sans-serif;
    color: #fff;    
    margin: 5px;
}

Answer 1

如果您想要缩放的布局，请使用相对尺寸(例如 em 或 ex)而不是绝对尺寸(例如 px)。

我建议将 html 元素的字体大小设置为 10px，这样在您更改字体大小之前，到处都是 1em = 10px:

html {font-size: 10px}

然后，如果您希望 div 为 993px，只需将其设置为 99.3em。现在您的布局将缩放。