CSS顯示：表或顯示：在safari和internt資源管理器中的表格單元格img

Question

嘿，所有的感謝你在看這篇文章的進展！

好的問題。我一直在使用Helix 3框架開發jooomla 3.0站點，現在升級到3.5站點。我在集中菜單時遇到了問題，並且發現了css顯示：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瀏覽器渲染圖像 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; 
} 

以前

後