CSS-Anzeige: Tabelle oder Anzeige: Tabelle-Zelle img in Safari und internt Explorer

Question

Hey alle Vielen Dank im Voraus für einen Blick auf diesen Beitrag!

Ok bis auf das Problem. Ich habe an einer jooomla 3.0-Site gearbeitet, die jetzt auf eine 3.5-Site mit dem Helix 3-Framework aktualisiert wurde. Ich hatte ein Problem mit der Zentrierung der Menüs und ich entdeckte css display: Tabelle Eigenschaft, löste das Problem. Ich habe versucht, die Eigenschaft dispaly: table mit Bildern an 2 Stellen auf der Homepage zu verwenden. Es funktioniert gut in Opera, Fire Fox, Chrome und Android sowie dem Browser auf dem iPad.

Unten ist der HTML-Code

<div class="booktable"> 
<div class="bcell"><a href="http://www.redemption-press.com/shop/product/21556" target="_blank"><img src="images/sidebar-main.png" alt="" /></a></div> 
<div class="bcell"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="XZF7EPBFS629N" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="images/Organize_His_Way_Teachers_Guide-1.jpg" type="image" /></form></div> 
<div class="bcell"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="P3R35E3YK7MLY" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="images/all_things_new.png" type="image" /></form></div> 
</div> 
<div class="pcell"> 
<p>All Things New is a compilation of short vignettes that will help liberate you from the entanglement of clutter, and show you how to live a life of space, freedom and peace. I pray that after reading All Things New you too will be transformed from munching through life to soaring high on newly sprouted wing</p></div> 

Hier ist die CSS:

/*----buttons on home page ----*/ 

.customimae_ads { 
width: 100%; 
margin-right: auto; 
margin-left: auto; 
margin-bottom: 2rem; 
display: table; 
background-color: #BBF4FB; 
border-collapse: separate; 
border-spacing: 1rem; 
border: 1px solid #02369b; 

} 
.acell { 
    display: table-cell; 
    border: 1px solid #02369b; 
    box-shadow: .3125rem .3125rem .3125rem #888888; 


} 
.customimae_ads img { 
width:100%; 
} 


/*---bookstore---*/ 
.booktable { 
width: 100%; 
display: table; 
margin-left: auto; 
margin-right: auto; 
border-collapse: separate; 
border-spacing: .5rem; 
overflow-x: hidden; 
background-color: #BBF4FB; 
border: 1px solid #02369b; 
margin-bottom: .625rem; 
} 

.bcell { 
display:table-cell; 
} 

.bcell input[type="image"] { 
width: 100%; 
} 

.bcell img { 
width: 100%; 
} 

Safari machen Bild safari table display issue

Internet Explorer click to see

/*----buttons on home page ----*/ 
 

 
.customimae_ads { 
 
width: 100%; 
 
margin-right: auto; 
 
margin-left: auto; 
 
    margin-bottom: 2rem; 
 
display: table; 
 
background-color: #BBF4FB; 
 
border-collapse: separate; 
 
border-spacing: 1rem; 
 
border: 1px solid #02369b; 
 
    
 
} 
 
.acell { 
 
    display: table-cell; 
 
    border: 1px solid #02369b; 
 
    box-shadow: .3125rem .3125rem .3125rem #888888; 
 
    
 

 
} 
 
.customimae_ads img { 
 
width:100%; 
 
} 
 

 

 
/*---bookstore---*/ 
 
.booktable { 
 
width: 100%; 
 
display: table; 
 
margin-left: auto; 
 
margin-right: auto; 
 
border-collapse: separate; 
 
border-spacing: .5rem; 
 
overflow-x: hidden; 
 
background-color: #BBF4FB; 
 
border: 1px solid #02369b; 
 
margin-bottom: .625rem; 
 
} 
 

 
.bcell { 
 
display:table-cell; 
 

 
} 
 

 
.bcell input[type="image"] { 
 
width: 100%; 
 

 
} 
 

 
.bcell img { 
 
width: 100%; 
 

 
} 
 
.pcell { 
 
float: right; 
 
width 50%; 
 
}

<div class="booktable"> 
 
<div class="bcell"><a href="http://www.redemption-press.com/shop/product/21556" target="_blank"><img src="images/sidebar-main.png" alt="" /></a></div> 
 
<div class="bcell"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="XZF7EPBFS629N" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="images/Organize_His_Way_Teachers_Guide-1.jpg" type="image" /></form></div> 
 
<div class="bcell"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="P3R35E3YK7MLY" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="images/all_things_new.png" type="image" /></form></div> 
 
</div> 
 
<div class="pcell"> 
 
<p> All Things New is a compilation of short vignettes that will help liberate you from the entanglement of clutter, and show you how to live a life of space, freedom and peace. I pray that after reading All Things New you too will be transformed from munching through life to soaring high on newly sprouted wing</p> 
 
</div>

Nochmals vielen Dank für Ihre Hilfe.

Answer 1

Dieses CSS behebt die Probleme in Safari für mich.

.booktable { 
    display: flex; 
    align-items: baseline; 
    padding: 0.5em 0.25em 0; 
} 

.bcell { 
    flex: 1; 
    padding: 0 0.25em; 
} 

Vor

Nach