Safari 5.1 Pausen CSS Tabelle Zellenabstand

Meine Website gut funktioniert in allen gängigen Browsern bis das update auf Safari 5.1. Nun, die primäre navigation ist kaputt bis. Ich war mit display:table-cell auf das Anker-element in der Liste element und war auch mit der font-size:0 hack zu entfernen, den Abstand zwischen Menü-Elemente. Hat sonst noch jemand auf dieses Problem und haben eine Lösung, die Sie anbieten könnte bis?

Vor:
Safari 5.1 Pausen CSS Tabelle Zellenabstand

Nach:
Safari 5.1 Pausen CSS Tabelle Zellenabstand

CSS:

#navigation {
  padding-top: 7px;
}

#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */{
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
                   since they are inline-block elements, this should be unneccessary when
                   CSS3 is approved */
}

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: inline-block;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}
#main-menu ul {
  width: 100%;
}
#main-menu li {
  width: 108px;
  text-align: center;
  padding-bottom: 7px;
  font-size: 11pt;
}
#main-menu a {
  display: table-cell;
  width: inherit;
  text-decoration: none;
  font-size: 0.9em;
  color: #035B9A;
  background-color: white;
  height: 30px;
  vertical-align: middle;
}

HTML:

<div id="navigation">
    <div class="section">
        <h2 class="element-invisible">Main menu</h2>
        <ul id="main-menu" class="links inline clearfix">
            <li class="menu-379 first"><a href="/about-scrubbed">About Us</a></li>
            <li class="menu-401"><a href="/" title="">Research</a></li>
            <li class="menu-385"><a href="/education">Education</a></li>
            <li class="menu-402"><a href="/" title="">Outreach</a></li>
            <li class="menu-403 active-trail active"><a href="/news" title="" class="active-trail active">News &amp; Events</a></li>
            <li class="menu-439"><a href="/people">People</a></li>
            <li class="menu-405"><a href="/" title="">Resources</a></li>
            <li class="menu-406"><a href="/" title="">Publications</a></li>
            <li class="menu-415 last"><a href="/partners">Partners</a></li>
        </ul>
    </div>
</div>

Dank.

Nur ein Hinweis, dies ist eine Drupal 7 Website.

Auch ich frei und demütig zugeben, ich bin nicht der beste in CSS-markup. Ich bin eine Menge zu lernen jetzt und versuche nur zu kratzen durch.

  • Könntest du einen link posten, auf der live-site?
  • Nicht eine live-Website, es wurde intern jetzt mit release geplant für 1. Oktober... wirklich Leid.
  • Aber ich habe mein eigenes problem lösen sich doch wieder. Ich setup in der Liste element zu display: block; und float: left; und es begann wieder zu arbeiten. Ich würde es verschicken als eine Antwort, aber Stapel lässt mich nicht 🙁 Brauchen Sie, um das zu bekommen rep up!
  • Bitte überprüfen Sie die Kommentar - sofort vor Ihnen. Muss ich nochmal 6 Stunden-ish vor-Stack, lassen Sie mich Antwort auf meine eigene Frage, weil meine rep ist nicht hoch genug.
  • Ach ja, richtig, ich bekomme es jetzt. Hoppla.
InformationsquelleAutor Lester Peabody | 2011-08-05
  1. 8

    Für diejenigen, die Probleme mit Safari und Abmessungen für die Elemente angezeigt:Tabelle; ich war in der Lage zu beheben meine Probleme durch entfernen der Polsterung und das hinzufügen Polsterung an ein Kind-element festgelegt display:table-cell;

    Offenbar Safari mag es nicht, wenn Sie versuchen, hinzufügen Polsterung für ein element festgelegt display:table; Im Nachhinein betrachtet, macht das Sinn.

    • Tausend mal danke. Diese wurde driving me nuts.
    InformationsquelleAutor Kevin C.
  2. 2

    Gelöst, indem Sie in der Liste Elemente anzeigen als block und schweben Sie auf der linken Seite.

    #navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: block;
  float: left;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}
    InformationsquelleAutor Lester Peabody
  3. 1

    Du willst border-collapse:collapse auf die display:table element zu entfernen, Zellenabstand.

    • Das war mein original Gedanke aber nach der überprüfung meiner CSS, die ich eigentlich nie hatte Sie ein übergeordnetes element mit display: table; so war ich nicht sicher, wo border-collapse: collapse;. Aber mein fix wie oben erwähnt, hat alles wieder funktioniert. Ich würde es verschicken als eine Antwort, aber Stack macht mich warten 7 Stunden mehr.
    InformationsquelleAutor Phrogz
  4. 0

    Nahm ich die css und html, und Hinzugefügt, um die css -

    body {
    background-color: gray;
}

    und ich bekam die folgende, die richtig aussieht.

    War diese laufen unter lion, das hat Safari 5.1

    • Naja, die Veränderung würde auf jeden Fall keinen Einfluss auf das layout. Vielleicht ist es ein Problem mit Safari 5.1 auf Windows. Vielen Dank für die überprüfung auf es aber.
    InformationsquelleAutor Bill Lynch
Schreibe einen Kommentar