混合％，而固定CSS

這是UI.StackExchange.com重複：
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css 混合％，而固定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>

來源

2010-08-30 rick schott

我用混合所有的時間，它通常是沒有問題的。許多高流量的網站使用它，我從來沒有聽到任何人說「不要那樣做」。如果它適合你的需求，去吧:) – Kyle 2010-08-30 13:15:45

@凱爾，性能問題將在客戶端，比如說與一個大數據的多行和嵌套表和東西的頁面，這不會是一個問題一個高流量的網站，如果其網頁包含一個或兩個表格後面的方法。 – aularon 2010-09-02 10:26:36

+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」 ...

充分披露：「正確」我已經很多年混頻器，無需真的知道我的做法是否

來源

2010-08-30 12:47:10

我無法找到測試用例任何書面證據來證明這一點。你能否告訴我們你在哪裏閱讀過這些內容？

我發現混合兩個相當有用，我也看到它在野外很多在知名/高流量的網站也。

主要影響舊版瀏覽器和IE的唯一問題是四捨五入。有一個在這裏閱讀：

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

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

來源

2010-08-30 12:37:24

我沒有任何證據，它很像Bigfoot。 :)我試圖從可能知道的人那裏揭穿神話，如果是神話的話;因爲我當然不知道。 – 2010-08-30 12:54:09

你擁有它的方式很好。每個單元格計算爲75px。你只需要小心百分比就是四捨五入。

在你的例子中，如果你的容器是303px，那麼每個單元格會計算爲75.66666px，四捨五入爲76px，總計爲304px這將比容器更大。這一個像素導致各種麻煩。

來源

2010-08-30 13:44:38 mikemerce

這應該有助於清除可以混合百分比和像素以及不混合時的情況。

當你像你的例子那樣做時，混合百分比和像素寬度不會成爲問題;

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

當它成爲一個問題是當你扭轉順序;

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

在這種情況下，如果瀏覽器窗口（或.container父）小於1000像素，上.container 25％將小於250像素並導致.cell溢出.container。

當在寬度加上填充的情況下混合百分比和像素時，它也會成爲問題;

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

這將導致.cell以具有320像素（100％+ 10px的+ 10px的）的寬度，並且溢出.container。

讓我知道這是否有助於清理事情。

來源

2010-09-03 21:01:45

它有幫助，但我真的在尋找如何混合可能會混淆逐步呈現的初始負載和瀏覽器的性能影響。 – 2010-09-04 01:10:12

如果你仔細想想，任何具有百分比寬度的元素都包含在「固定」寬度html元素中的某個元素中。如果有的話，對於較舊的瀏覽器來說，將百分比寬度放在固定寬度（300px的25％）內可能會比較難以分層百分比（html的25％的25％）。 – 2010-09-04 18:56:03

從我所做的研究來看，如何定位你的CSS（id，class，universal等）在瀏覽器渲染性能中是最重要的。

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering

來源

2010-09-07 12:59:38

混合％，而固定CSS

回答

相關問題