position:absolue de display:table-cell éléments causes WebKit pour le rendu de l'écart

Je suis en train de construire un menu horizontal avec le dernier élément séparés et placés à droite, de sorte qu'un logo se déroule entre le dernier et l'avant-dernier élément.

Firefox, Opera (Presto) et même le sale ceux de Redmond (9.0+) rendre comme je m'attends. Mais WebKit (Chrome et Safari à la fois de rendre le même) prend de la place après la seconde dernier point où le dernier élément de rester sans position: absolute.

<header>Logo</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Statistics</a></li>
        <li><a href="#">Data Management</a></li>
        <li><a href="#">Market Research</a></li>
        <li><a href="#">Web &amp; Apps</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

- Je afficher la liste table et les éléments de la liste que table-cell parce que je veux la partie gauche du menu (le premier, le deuxième, dernier élément, à gauche du logo), avoir une largeur fixe, tandis que les éléments à prendre la largeur dont ils ont besoin pour leur contenu. Le texte pourrait changer quoi que ce soit. Jusque là, tout va bien. Mais si je donne le dernier élément d'un display: block; position: absolute, WebKit rend cet écart (blanc par exemple).

position:absolue de display:table-cell éléments causes WebKit pour le rendu de l'écart

nav ul
{
    display: table;
    background: white; /* that's what you see in webkit */
}

nav ul li
{
    display: table-cell;
}

nav ul li:last-child
{
    display: block; /* "display: none;" works like I would expect */
    position: absolute;
}

Ici est un Violon.

Je ne suis pas sûr si c'est un bug dans WebKit, parce que le positionnement absolu d'un élément à l'intérieur d'un tableau peut ne pas être le comportement par défaut. D'autre part, display: none fonctionne comme je l'espère. Ne devrait pas l'espace de la consommation de 0 dans les deux cas?

Quelqu'un sait d'un bug dans WebKit ou quelqu'un a une idée de comment faire pour éviter cette lacune?

Je ne comprends pas pourquoi vous forcez un non-ordonnée de la liste d'affichage:tableau? Mieux utiliser des float, display:inline ou display:inline-block.
Parce que je veux que le menu à l'échelle de la même largeur, peu importe ce que le texte des articles.
Je comprends le problème existe toujours, donc je suppose que ce n'est pas une option de déplacer simplement la couleur d'arrière-plan sur le <li> plutôt que <ul>?
malheureusement pas. Le problème, c'est que les modifications de mise en page (oui, c'est juste 2 px, mais je ne peux pas accepter que... et oui, la doc prétend que c'est normal 😉 ). Seule une solution de contournement qui en résulte dans exactement la même mise en page comme Joshs ne ferait l'affaire.

OriginalL'auteur Linus Caldwell | 2013-03-11

4

Mis de l'avant-dernier élément de "Web & Apps" pour afficher block au lieu de table-cell:
```
nav ul li:nth-last-child(2) 
{
    display: block;
}
```
Affichage du bloc de violon

Holy sh*!! Si vous le voyez, c'est tellement facile que vous ne pouvez pas croire et de tuer votre auto pour ne pas avoir l'idée. Eh bien, pas tout le monde peut être un génie, je suppose. 😉 Vous ÊTES un génie graham. Merci beaucoup!
Graham remonta vers le bas comme un vrai fan de Columbo! Grande correction 🙂

OriginalL'auteur graham mendick
1

J'ai poussé cette réponse sur d'autres personnes, et souvent eu la "flexbox n'est pas largement soutenue encore" réponse. Cependant, ici, il va de nouveau. La raison que Webkit est défaillante, c'est que dans sa mise en œuvre de display: table, le DOM est de réserver de l'espace pour la sémantiquement déclaré cellule. Le moyen le plus facile à mettre en œuvre ce serait tout simplement de briser cet élément dans son propre objet, comme vous l'avais fait avec le logo.

CEPENDANT...
si vous souhaitez conserver ces sémantiquement groupés - Et pourquoi ne serait-il pas, ils sont tous content, non? - vous pouvez toujours utiliser le flexbox modèle pour remédier à cela.

Ici, un violon, la preuve de son utilisation.

Voici ce que nous avons modification:
```
nav ul
{
    display: box;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: row;
    background: white; /* that's what you see in webkit */
    empty-cells: hide;
    table-layout: auto;
}

nav ul li
{
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
```
Maintenant, vos articles correctement couvrir l'arrière-plan, car il n'est plus le traitement de la dernière li comme s'il s'agissait d'une véritable cellule de tableau et toujours dans les limites de la table. Flexbox offre une mise en page flexible pour occuper l'espace disponible. Souvent les gens voient cela comme une solution pour le "Saint-Graal de la Mise en page" problème, mais son utilisation s'étend bien au-delà de cela.

Donc, si un autre "Flexbox n'est pas largement pris en charge suffisamment" la réponse est arrivée, je comprends. Mais je vais garder la propose comme une réponse à chacun de ces que j'ai trouver, parce que le soutien est mieux en mieux chaque jour.

Je voudrais l'utiliser, et je vais peut-être un jour. Mais (désolé 🙂 ) comme vous l'avez dit: Actuellement, il fait trop chaud, parce que j'en ai besoin pour un site web de l'entreprise. +1 pour votre effort et vraiment une bonne solution pour l'avenir. Si personne ne vient avec une "correction" comme -webkit-be-so-nice-to-give-gap-the-width: 0 (terrible ce qu'est une jungle qu'ils ont actuellement), je vais la récompense. Donc, vous semblez avoir de bonnes chances ;-). Merci beaucoup!
Si vous avez choisi de modernizr vous pouvez utiliser flexbox et table parallèle et le navigateur choisit d'utiliser la version, il prend en charge
Désolé! Votre suggestion est toujours le meilleur en général. Mais dans mon cas précis grahams solution est exactement ce que je voulais faire et il est compatible à la baisse (en plus de l' :nth-child(), mais je peux aller autour de ce parce que j'ai un montant fixe d'éléments, juste le texte varie). De toute façon, merci encore pour vos efforts!
Oui, vous avez raison, et je le sais. Mais je ne me sens pas à l'aise avec le fait de faire la mise en page en fonction JavaScript.
Pourquoi est-ce? Vous pouvez utiliser modernizr pour "dégradation gracieuse" ou "amélioration progressive" de

OriginalL'auteur Josh Burgess

Un peu de CSS modifié, regardez s'il vous plaît, si ce que vous souhaitez, Violon

body
{
    position: relative;
    background: #bbbbbb;
    text-align: center;
    color: white;
}

header
{
    position: absolute;
    top: 10px;
    left: 630px;
    width: 80px;
    height: 60px;
    line-height: 60px;
    background: black;
    text-transform: uppercase;
}

nav
{
    position: absolute;
    top: 20px;
    left: 20px;
}

nav ul,
nav li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul
{
    width: 200px;
}

nav ul li a
{
    display: block;
    padding: 1px;
    background: #0099ff;
    color: white;
    text-decoration: none;
}

nav ul li a:hover
{
    background: black;
}

nav li{
    margin-bottom: 5px;
    height: 25px;
    line-height:25px;
}

Mais maintenant, c'est un menu vertical, n'est pas horizontale!
Merci pour votre réponse. Mais malheureusement, ce n'est pas ce que je veux. Comme je l'ai mentionné, je veux avoir un menu horizontal. Et flottants les éléments comme Lowkase proposé n'est pas une option parce que je ne veux pas donner les éléments d'une largeur fixe. Ils devraient prendre l'espace dont ils ont besoin, de sorte que je peux avoir, à court et à long élément de textes résultant de la même largeur pour l'ensemble du menu de gauche.

OriginalL'auteur pconline2046

0

Tout en utilisant absolue, chaque chose en rapport/la concernant doit être absolue en terme de pixels.

J'ai mis à jour le violon, comme votre nav + logo .l'en-tête + .nav:dernier enfant n'ont pas été totalisant bon.

Violon lien : http://jsfiddle.net/3TUk8/2/

dans d'autres cas, vous devrez faire
```
nav ul
{
    display: table;
    background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
    list-style: none;
}
```
J'espère que cela a résolu votre problème 🙂

Je vous remercie pour vos efforts! Malheureusement, il semble y avoir un malentendu. Je ne voulais pas dire la "marge" autour du logo. Je voulais dire le blanc de l'écart de navigateurs WebKit rendre droit à la seconde du dernier élément. J'ai mis à jour ma question afin de fournir une comparaison capture d'écran.
Ont mis à jour la réponse, les pls se référer dernière réponse, faire des UL de fond de même que le corps d'arrière-plan qui permet de masquer le problème, webkit ne fournit pas de solution à ce, d'une propriété pour webkit est-il -webkit-column-gap:0em; mais qui ne fonctionne pas. essayez si le travail de votre côté 🙂
🙂 Vous êtes vraiment essayer de m'aider. Je vous remercie, je vous remercie beaucoup! Le problème est que, dans la version finale il y a un background-image, pas juste une couleur. Si cela ne fonctionne pas dans mon cas, désolé. Mais encore une fois: vraiment, je vous remercie pour votre effort. Vous êtes grand!
ul{background:transparent} profiter 🙂
Délicieux 🙂 Tous vos background solutions de contournement serait de travailler dans certains autres cas (malheureusement pas dans le mien), donc, en partie, vous avez absolument raison. Mais même alors, la partie gauche du menu est 2px plus mince qu'elle ne devrait l'être. Oui, je suis un peu comme "Moine", donc ce n'est pas acceptable pour moi... je ne serais pas capable de dormir. 😉 En tout cas, merci encore beaucoup!

OriginalL'auteur MarmiK

Vous devez vous connecter pour publier un commentaire.