2017-04-06 7 views
0

Ich habe einen Code, der in Firefox und Edge aber nicht in Chrome funktioniert, bitte kann jemand helfen, darauf hinzuweisen, was ich falsch mache.Mein Code funktioniert in Firefox und Edge, aber nicht in Chrome, wo liege ich falsch?

Sie sollen drei Boxen sein, die über die gesamte Breite des div nebeneinander sitzen.

Hier ist, wie es in Firefox rendert, und hier ist Chrome.

Sehr neue Codierung so erwarte ich, dass ich etwas sehr offensichtlich abhanden bin ...

div.img2 { 
 
    display: table-cell; 
 
    border: 1px solid #ccc; 
 
    width: 30%; 
 
    margin: 5px; 
 
} 
 

 
div.img2:hover { 
 
    border: 1px solid #72bf44; 
 
    opacity: 0.8; 
 
    filter: alpha(opacity=25); 
 
} 
 
div.img2 img { 
 
    width: 50%; 
 
    height: 50%; 
 
    margin: 5px; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
} 
 

 
div.desc2 { 
 
    text-align: center; 
 
} 
 
.wrapper2{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    margin-bottom:10px; 
 
}
<div class="wrapper2"> 
 
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/contact-us/general-enquiries/"> 
 
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Enquiry.png" alt="General Enquiries" width="526px" height="526px" /> 
 
</a> 
 
<div class="desc2"> 
 
<h3><strong><a href="http://www.carritech.com/contact-us/general-enquiries/">General Enquiries</a></strong></h3> 
 
</div> 
 
</div> 
 
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/request-a-quote/"> 
 
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Quote.png" alt="Request a Quote" width="526px" height="526px" /> 
 
</a> 
 
<div class="desc2"> 
 
<h3><strong><a href="http://www.carritech.com/request-a-quote/">Request a Quote</a></strong></h3> 
 
</div> 
 
</div> 
 
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/telecommunications-company-information/feedback/"> 
 
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Feedback.png" alt="Customer Feedback" width="526px" height="526px" /> 
 
</a> 
 
<div class="desc2"> 
 
<h3><strong><a href="http://www.carritech.com/telecommunications-company-information/feedback/">Leave Feedback</a></strong></h3> 
 
</div> 
 
</div> 
 
</div>

+0

Der Code selbst sieht gut aus, aber was ich mit Chrome finden, dass es hat manchmal Probleme mit 'div.class' Klassen. versuche, 'div.img' in' .img' umzuwandeln, das könnte helfen. Auch das Aktualisieren mit Strg + F5 anstatt nur "Aktualisieren" zwingt Chrome, die neueste Version Ihres Stylesheets zu laden. Das könnte auch helfen – Tijmen

+0

Auch für mich arbeiten –

+0

Vielen Dank für Ihre Rückkehr zu mir und für Ihre Hilfe. Ich habe Ihren Vorschlag, von der div.img in nur .img und auch in einem privaten Fenster zu ändern, aber obwohl es das Ergebnis durch Verschieben der Divs auf die gleiche Zeile, die Bilder sind immer noch verzerrt verbessert versucht und gestreckt auf Chrome. Könnte es etwas mit den Abmessungen der Bilddateien selbst zu tun haben? Danke nochmal –

Antwort

1

scheint auf Chrom zu arbeiten, zu fein, können Sie den Cache löschen soll oder offen in privaten Fenster ist meine Vermutung:

enter image description here

Verwandte Themen