सफारी 5.1 ब्रेक सीएसएस टेबल सेल स्पेसिंग

Question

मेरी साइट सफारी 5.1 के अपडेट तक सभी प्रमुख ब्राउज़रों में ठीक काम कर रही थी। अब, प्राथमिक नेविगेशन बस्ट किया गया है। मैं सूची तत्व के भीतर एंकर तत्व पर display:table-cell का उपयोग कर रहा था और मेनू तत्वों के बीच अंतर को हटाने के लिए font-size:0 हैक का भी उपयोग कर रहा था। क्या किसी और को इस मुद्दे का सामना करना पड़ा है और एक समाधान है जो वे पेश कर सकते हैं?

से पहले:

के बाद:

सीएसएस:

#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> 

धन्यवाद।

बस एक नोट, यह एक ड्रूपल 7 साइट है।

मैं भी स्वतंत्र रूप से और नम्रता से स्वीकार करता हूं कि मैं सीएसएस मार्कअप में सबसे अच्छा नहीं हूं। मैं अभी बहुत कुछ सीख रहा हूं और बस स्क्रैप करने की कोशिश कर रहा हूं।

Answer 1

सूची तत्वों को ब्लॉक के रूप में प्रदर्शित करके हल किया गया और उन्हें बाईं ओर तैरते हुए हल किया गया।

#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; 
} 

Answer 2

मैं अपने सीएसएस और एचटीएमएल ले लिया, और सीएसएस

body { 
    background-color: gray; 
} 

को जोड़ा गया है और मैं following, जो सही लग रहा है मिल गया।

इस शेर के तहत चलाया गया था, जो सफारी 5.1

Answer 3

है आप display:table तत्व पर border-collapse:collapse सेल रिक्ति निकालना चाहते हैं।

Answer 4

और प्रदर्शन करने के लिए सेट तत्वों के लिए सफारी के साथ परेशानी आयामों उन लोगों के लिए

: तालिका; मैं पैडिंग को हटाकर और प्रदर्शित करने के लिए सेट किए गए बच्चे तत्व को पैडिंग जोड़कर अपनी समस्याओं को ठीक करने में सक्षम था: टेबल-सेल;

स्पष्ट रूप से सफारी इसे पसंद नहीं करते हैं जब आप प्रदर्शित करने के लिए तत्व सेट में पैडिंग जोड़ने का प्रयास करते हैं: तालिका; पीछे की ओर, यह समझ में आता है।