我为这个页面的菜单创建了一个简单的 HTML/CSS 表格: http://derma-clinic.gr/index.php/el/epikoinonia .
问题是它在 Firefox 中完美运行。但在 Chrome 和 IE 中，效果不佳。
这是来自一个菜单表代码及其使用的 CSS。 CSS 对于所有其他表都是相同的。 http://jsfiddle.net/2vb0furb/
html:
<table class="mega_menu_templ" style="background-color: #fbf6f1; width: 902px; height: 275px;" border="0">
<tbody>
<tr>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules" class="f_category">Ακμη - Ουλες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules/akmi" class="sub_category">Ακμή</a></span></li>
<li><span style="font-size: small;"> </span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules/oules-xiloeidi" class="f_category">Ουλες - χηλοειδη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/thilomata" class="sub_category">Θηλώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/thilomata/antimetopisi" class="sub_category">Αντιμετώπιση</a></span></li>
<li><span style="font-size: small;"> </span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi" class="f_category">Σπιλοι</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/xartografisi-spilon" class="sub_category">Χαρτογράφηση Σπίλων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/afairesi-spilon" class="sub_category">Αφαίρεση Σπίλων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/karkinos-tou-dermatos" class="sub_category">Καρκίνος του δέρματος </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/melanoma" class="sub_category">Μελάνωμα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/prolipsi" class="sub_category">Πρόληψη</a></span></li>
<li><span style="font-size: small;"> </span></li>
<li></li>
</ul>
</td>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies" class="f_category">Παιδικες Δερματοπαθειες </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/spiloi-sta-paidia" class="sub_category">Σπίλοι Στα Παιδιά</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/paidikes-alopekies" class="sub_category">Παιδικές Αλωπεκίες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/aimaggeiomata" class="sub_category">Αιμαγγειώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/myrmikies" class="sub_category">Μυρμηκιές</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/oules" class="sub_category">Ουλές</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/paidiki-leyki" class="sub_category">Παιδική Λεύκη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/ravdoseis-ragades" class="sub_category">Ραβδώσεις - Ραγάδες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/atopiki-dermatitida" class="sub_category">Ατοπική Δερματίτιδα</a></span></li>
<li><span style="font-size: small;"> </span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites" class="f_category">Μυκητες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/mykitiasi-dermatos" class="sub_category">Μυκητίαση Δέρματος</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/mykitiasi-nyxion" class="sub_category">Μυκητίαση νυχιών</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/therapeies-me-laser" class="sub_category">Θεραπείες με Laser</a></span></li>
<li><span style="font-size: small;"> </span></li>
</ul>
</td>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena" class="f_category">Σεξουαλικα Μεταδιδομενα </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/kondylomata" class="sub_category">Κονδυλώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/hiv-aids" class="sub_category">HIV (AIDS)</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/kolpitida" class="sub_category">Κολπίτιδα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/erpis-gennitikon-organon" class="sub_category">Έρπης γεννητικών οργάνων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/syfili" class="sub_category">Σύφιλη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/gonorroia-vlennorroia" class="sub_category">Γονόρροια (Βλεννόρροια)</a></span></li>
<li></li>
<li><span style="font-size: small;"> </span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/leyki" class="f_category">Λευκη</a></span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/psoriasi" class="f_category">Ψωριαση</a><strong> </strong></span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/dermatitida-atopiki-ekzema" class="f_category">Δερματιτιδα (Ατοπικη) - Εκζεμα</a></span></li>
<li></li>
<li></li>
</ul>
</td>
<td><img alt="dermatologia-afrodisiologia" src="http://derma-clinic.gr/images/stories/menu_icons/therapeies_prosopou.png" height="267" width="152" /></td>
</tr>
</tbody>
</table>
CSS:
/* MEGA MEWNU STYLESHEET */
.mega_menu_templ {
text-decoration: none !important;
position: relative !important;
}
.mega_menu_templ a{
text-decoration: none !important;
/*font-size:50pt !important; -> kanei ola link 50pt*/
}
.mega_menu_templ a.f_category{
color: #D97E2B; !important;
text-transform: uppercase;
}
.mega_menu_templ a.f_category:hover{
color: #828280; !important;
}
.mega_menu_templ a.f_category2{
color: #D97E2B; !important;
text-transform: uppercase;
margin-bottom: 15px;
}
.mega_menu_templ a.f_category2:hover{
color: #828280; !important;
}
.mega_menu_templ a.sub_category{
color: #656564; !important;
}
.mega_menu_templ a.sub_category:hover{
color: #D97E2B; !important;
}
.mega_menu_templ ul {
list-style: none !important;
height:120% !important;
font-family: Verdana, Geneva, sans-serif;
}
.mega_menu_templ ul.one li {
display: block;
width: auto;
height: 20px;
}
.mega_menu_templ ul.one li.height {
display: block;
width: auto;
height: 28px;
}
/* End Additional CSS Styles */
有人可以帮我找出为什么会这样吗？
最佳答案
为您的 ul 移除 height:120% !important。
.mega_menu_templ ul {
list-style: none !important;
/*height:120% !important;*/
font-family: Verdana, Geneva, sans-serif;
}
关于html - TableView 在 Chrome 和 IE、Firefox 中显示不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25178269/