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

标签 css safari internet-explorer-8 joomla3.0

大家好,先谢谢你们看这篇文章!

好的,回到问题。我一直在开发一个 jooomla 3.0 站点,现在使用 Helix 3 框架升级到 3.5 站点。我在将菜单居中时遇到问题,我发现了 css display: 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> 

再次感谢您的帮助。

最佳答案

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

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

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

之前

enter image description here

之后

enter image description here

关于CSS 显示 : table or display:table-cell img in safari and internt explorer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36854696/

相关文章:

html - 使用词缀 Bootstrap 将粘性导航栏居中并扩展边框

javascript - 如何在html <select>中使用onclick事件

javascript - 为什么这个脚本在 IE8 中不起作用?

css - table-cell - 某种 colspan?

html - 代码未堆叠在 col-sm-12 中

css - 仅使用 css 隐藏和显示列表

javascript - iOS 11.2.5 上的文本区域插入符不旋转

android - 如何使用视口(viewport)使我的网站宽度适合移动设备的大小?

jquery - IE8显示: none elements pushing down anchor tag

javascript - Angular 路由导致 IE 死循环