Дисплей CSS: таблица или дисплей: таблица-ящик img в сафари и исследователя internt

Question

Привет всем, что вам нужно, чтобы посмотреть этот пост!

Хорошо, к проблеме. Я работаю над сайтом jooomla 3.0, теперь обновленным до сайта 3.5 с использованием инфраструктуры Helix 3. у меня возникла проблема с центрированием меню, и я обнаружил свойство css display: table, это решило проблему. Я попытался использовать свойство dispaly: table с изображениями в 2 местах на главной странице. он отлично работает в Opera, Fire Fox, Chrome и Android, а также в браузере на ipad.

Ниже приведен HTML-код

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

Вот 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 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>

Еще раз спасибо за вашу помощь.

Answer 1

Этот CSS исправил проблемы в Safari для меня.

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

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

Перед

После