混合百分比和固定 CSS答案

【问题标题】：Mixing percent and fixed CSS混合百分比和固定 CSS
【发布时间】：2011-04-05 17:44:08
【问题描述】：

这是来自 UI.StackExchange.com 的副本：
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

您是否应该同时应用百分比和固定 CSS？它会引起问题吗？如果会，会引起什么问题？

混合会降低浏览器的渲染性能吗？
在渐进式渲染浏览器的初始加载时，混合是否会给您带来奇怪的结果？

以下只是混合使用的简化示例，可以是任何混合使用。 我不是在寻找示例的验证。我听说你不应该做我在下面的示例中所做的事情，所以我试图找出以这种方式使用 CSS 是否存在问题。

混合使用示例：

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>

【问题讨论】：

我一直在使用混音，通常没问题。许多高流量网站都使用它，我从未听过有人说“不要那样做”。如果它适合您的需求，那就去吧:)
@Kyle，性能问题将出在客户端，例如，对于具有多行大数据和嵌套表之类的页面，对于高流量网站来说这不是问题如果它的页面包含遵循该方法的一两个表格。

标签： css performance browser rendering cross-browser

【解决方案1】：

我找不到任何带有测试用例的书面证据来证明这一点。您能否指出您在哪里读到这方面的信息？

我发现将两者混合非常有用，而且我在知名/高流量网站上也经常看到它。

主要影响旧版浏览器和 IE 的唯一问题是四舍五入。在这里阅读：

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

【讨论】：

我没有任何证据，它很像大脚怪。 :) 我试图从可能知道的人那里揭穿这个神话，如果它是一个神话的话；因为我肯定不会。

【解决方案2】：

+1 好问题。您可能想看看这篇文章：“Fixed-width, liquid, and elastic layout”它涵盖了固定宽度布局 (em) 和弹性布局 (%)，如果您单击转到下一页，它会查看“弹性-液体混合” ' - 其中 width: 设置为一种方式，max-width: 设置另一种方式。我知道上面链接的文章不是完全你问的，但它是在单一 CSS 样式中混合使用的示例。

编辑：经过进一步阅读，我确实发现了很多关于这个主题的矛盾意见。我发现几篇文章持有“you just can’t mix up pixels and percentages”的想法。不过，在大多数情况下，这些网站已经过时了。当我将搜索范围缩小到仅在过去一年内发布的文章时，情况发生了一些变化。仍然有一些反对混音的意见，但他们通常没有解释原因，而且似乎是“我一直听说这是个坏主意”的品种。我发现的有关该主题的大多数最新信息似乎表明，将百分比与固定宽度混合是一种完全可以接受的做法，只要在了解结果的情况下完成。

见：

“Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?”（2009 年 6 月）
"For A Beautiful Web: Changing Man Layout" ...

完全披露：我多年来一直是混音师，但真的不知道我的方法是否“正确”。

【讨论】：

【解决方案3】：

你拥有它的方式很好。每个单元格计算为 75px。唯一需要注意百分比的时候是四舍五入的时候。

在您的示例中，如果您的容器为 303 像素，则每个单元格将计算为 75.66666 像素并向上取整为 76 像素，总共 304 像素，这将大于容器。那一个像素会引起各种麻烦。

【讨论】：

【解决方案4】：

这应该有助于弄清楚什么时候可以混合百分比和像素，什么时候不可以。

当您按照示例进行操作时，混合百分比和像素宽度不会成为问题；

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

当你颠倒顺序时，它变成了问题；

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

在这种情况下，如果浏览器窗口（或 .container 的父级）小于 1000px，.container 上的 25% 将小于 250px 并导致 .cell 溢出 .container。

在宽度加内边距的情况下，混合百分比和像素也会成为问题；

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

这将导致.cell 的宽度为320px（100% + 10px + 10px），并溢出.container。

让我知道这是否有助于解决问题。

【讨论】：

它有帮助，但我真的在寻找混合如何混淆渐进式渲染的初始负载和对浏览器的性能影响。
如果你想一想，任何具有百分比宽度的元素都包含在“固定”宽度的 html 元素中。如果有的话，对于较旧的浏览器来说，对百分比进行分层（html 的 50% 的 25% 的 25%）可能比将百分比宽度放在固定宽度（300px 的 25%）内更困难。

【解决方案5】：

从我所做的研究来看，你如何定位你的 CSS(id,class,universal...etc) 对浏览器渲染性能来说是最重要的。

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering

【讨论】：