CSS 显示：table 或 display:table-safari 和 Internet Explorer 中的单元格图像

Question

大家好，先谢谢大家看一看 post！

好的。我一直在开发一个 jooomla 3.0 站点，现在使用 Helix 3 框架升级到 3.5 站点。我在将菜单居中时遇到问题，我发现 css 显示：table 属性，这解决了问题。我尝试在主页上的两个位置使用 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

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

之前

之后

CSS 显示：table 或 display:table-safari 和 Internet Explorer 中的单元格图像

CSS display: table or display:table-cell img in safari and internt explorer

css

safari

internet-explorer-8

joomla3.0