CSS显示：表格或显示：safari和internt explorer中的table-cell img

Question

嘿大家都感谢你们对这篇文章的看法！

好的问题。我一直在研究一个jooomla 3.0网站，现在使用Helix 3框架升级到3.5网站。我遇到了以菜单为中心的问题，我发现了css display：table属性，这解决了这个问题。我试图在主页上的2个位置使用dispaly：table属性和图像。它在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

网络浏览器 click to see

＆＃13;

＆＃13;

/*----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%; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

再次感谢您的帮助。

Answer 1

这个CSS为我解决了Safari中的问题。

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

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

<强>之前

<强>后