混合百分比和固定CSS

+一个好问题。您可能想看看这篇文章:“ Fixed-width, liquid, and elastic layout 确切地 但这是一个在单一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 ...

知道我的方法是否“正确”

这应该有助于清除什么时候可以混合百分比和像素,什么时候不行。

混合百分比和像素宽度不会是一个问题,当你这样做,在你的例子;

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

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

在这种情况下,如果浏览器窗口(或 .container )小于1000px,25%开启 .容器 .cell .容器 .

它也成为一个问题,当你混合百分比和像素的情况下,宽度加上填充;

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

.细胞 宽度为320px(100%+10px+10px),溢出 .容器 .

你的方式很好。每个单元格的计算值为75像素。只有在四舍五入开始的时候,你才需要小心百分比。

在您的示例中,如果您的容器是303px,那么每个单元格的计算结果将是75.66666px,取整为76px,总计304px,这将比容器大。那一个像素会引起各种各样的麻烦。

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

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering

我找不到任何与测试案例相关的书面证据来证明这一点。你能告诉我们你在哪儿读到的吗?

唯一主要影响旧浏览器和IE的问题是舍入。请阅读以下内容:

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

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