表格视图在Chrome和IE，Firefox中显示不同

Question

我已经为此页面上的菜单创建了一个简单的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;">&nbsp;</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;">&nbsp;</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">Καρκίνος του δέρματος&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </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;">&nbsp;</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">Παιδικες Δερματοπαθειες&nbsp; </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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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 */

有人可以帮我找出为什么会这样吗？

Answer 1

将以下内容添加到您的CSS中

td {
    float: left;
}

您可能需要编辑其他CSS类以将图像保留在右侧。

Answer 2

去除height:120% !important对您的ul height:120% !important 。

 .mega_menu_templ ul {
  list-style: none !important;
   /*height:120% !important;*/
   font-family: Verdana, Geneva, sans-serif;
 }

演示