Pourcentage de mélange et CSS fixe

Question

C'est un double UI.StackExchange.com:
http://ui.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Si vous utilisez un pourcentage fixe et CSS ensemble? Ça va causer des problèmes, et si oui, de quels types?

• Ne mélange dégrader navigateur des performances de rendu?
• Va de mixage vous donner des résultats bizarres sur chargement initial avec la progression de rendu des navigateurs?

Ci-dessous est juste un simplifiés exemple de mélange de l'utilisation, il pourrait être n'importe quel mélange. Je ne suis pas à la recherche pour la validation de l'exemple. J'ai entendu dire que vous ne devriez jamais faire ce que j'ai dans l'exemple ci-dessous, alors j'essaie de savoir si en utilisant le CSS de cette manière est un problème.

Exemple de mélange de l'utilisation:

<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 Bonne question. Vous voudrez peut-être avoir un coup d'oeil à cet article: "largeur Fixe, de liquide et élastique de mise en page", Il va plus de mise en page à largeur fixe (em) et les mises en page élastique (%), et si vous cliquez sur pour passer à la page suivante il regarde 'Élastique-liquide hybride" - où la largeur: est définie d'une façon, avec max-width: jeu de l'autre. Je sais que l'article lié ci-dessus n'est pas exactement ce que vous avez demandé, mais c'est un exemple de mixité au sein d'une seule feuille de style CSS.

---

Edit: Après une lecture, j'ai trouvé un tout à fait un peu d'opinions contradictoires sur le sujet. J'ai trouvé plusieurs articles qui ont retenu l'idée que "vous ne pouvez pas mélanger les pixels et les pourcentages". Si, pour la plupart, ces sites ont été assez daté. Quand je réduit la recherche à seuls les articles qui ont été mis en place au cours de la dernière année, les choses ont un peu changé. Il y avait encore quelques opinions contre le mélange, mais en général, ils n'expliquent pas pourquoi, et semblait de l' "j'ai toujours entendu dire que c'était une mauvaise idée" de la variété. La majorité des informations plus récentes que j'ai trouvé sur le sujet semble indiquer que le pourcentage de mélange avec des largeurs fixes est parfaitement acceptable, tant que c'est fait avec une compréhension des résultats.

voir:

• "Fixe ou Fluide vs Élastique Disposition: Quelle est La bonne Pour Vous?" (Juin 2009)
• "Pour Une Belle Web: Le Changement De Disposition De L'Homme" ...

La Divulgation complète: j'ai une table de mixage pour de nombreuses années, sans vraiment savoir si ma démarche est correcte.'

Answer 2

Cela devrait aider à lever lorsqu'il est ok pour mélanger pour cent et les pixels et quand il ne l'est pas.

Mélange pour cent et largeurs en pixels ne serait pas un problème quand vous le faites comme dans votre exemple;

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

Quand il devient un problème, c'est quand vous inversez l'ordre;

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

Dans ce cas, si la fenêtre du navigateur (ou le parent d' .container) est inférieure à 1000px, 25% sur .container sera de moins de 250 px et causer .cell à débordement .container.

Il devient également un problème lorsque vous mélangez pour cent et les pixels dans le cas de largeur de plus de rembourrage;

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

Cela entraînera .cell pour une largeur de 320px (100% + 10px + 10px), et de débordement .container.

Laissez-moi savoir si cela aide à clarifier les choses.

Answer 3

La façon dont vous l'avez est très bien. Chaque cellule calcule jusqu'à 75 pixels. Les seules fois où vous devez faire attention aux pourcentages, c'est lors de l'arrondi.

Dans votre exemple, si votre conteneur était de 303 pixels, chaque cellule serait évaluée à 75,66666 pixels et arrondie à 76 pixels, pour un total de 304 pixels qui serait plus grand que le conteneur. Ce pixel cause toutes sortes de problèmes.

Answer 4

De la recherche que j'ai fait, il apparaît comment vous ciblez votre CSS(id,class,universal, etc...) est plus important dans le navigateur des performances de rendu.

Efficacement de Rendu CSS

Écriture Efficace CSS pour une utilisation dans le Mozilla de l'INTERFACE utilisateur

Optimiser le rendu de navigateur

Answer 5

Je ne peux pas trouver de preuves écrites avec des cas de test pour le prouver. Pourriez-vous nous indiquer où vous lisez à ce sujet?

Je trouve le mélange des deux est très utile et je le vois beaucoup dans la nature sur réputées / haut de trafic des sites aussi.

Le seul problème qui affecte principalement les anciens navigateurs IE et est arrondi. À lire ici:

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

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