Question

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

您是否应该将百分比和固定CSS一起应用？它会引起问题，如果是这样的话会发生什么？

混合会降低浏览器渲染性能吗？
使用渐进式渲染浏览器，混合会在初始加载时给出奇怪的结果吗？

以下只是混合使用的一个愚蠢的例子，它可以是任何混合物。 我不是在寻找示例的验证。我听说你不应该在下面的例子中做我所拥有的，所以我试图找出以这种方式使用CSS是一个问题。< / p>

混合使用示例：

<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>

Answer 1

+1好问题。你可能想看一下这篇文章：“Fixed-width, liquid, and elastic layout”它覆盖固定宽度布局（em）和弹性布局（％），如果你点击进入下一页，它会看到'弹性 - liquid hybrid' - 其中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” ...

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

Answer 2

这可以帮助清除混合百分比和像素的时间，以及何时不是。

在您的示例中执行此操作时，混合百分比和像素宽度不会成为问题;

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

当它成为问题时，是你颠倒订单时;

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

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

在宽度加填充的情况下混合百分比和像素时也会出现问题;

.container

这会导致.container { width:300px; } .cell { width:100%; padding: 10px; }的宽度为320px（100％+ 10px + 10px），溢出.cell。

如果这有助于澄清问题，请告诉我。

Answer 3

你拥有它的方式很好。每个单元格计算为75px。你必须要小心百分比的唯一一次是四舍五入。

在您的示例中，如果您的容器是303px，则每个单元格将评估为75.66666px并向上舍入为76px，总计304px将大于容器。那一个像素会造成各种麻烦。

Answer 4

从我所做的研究中，看起来你如何定位你的CSS（id，class，universal ......等）在浏览器渲染性能中是最重要的。

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering

Answer 5

我找不到任何有测试用例的证据证明这一点。你能指点我们到你读到的地方吗？

我觉得将两者混合起来非常有用，而且我在知名/高流量网站上也看到了很多。

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

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

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

混合百分比和固定CSS

5 个答案: