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

以前

后