我在一个网站上工作,在该网站上我将主页上的 div 设置为可点击并具有图像背景。
主页在 Chrome 中正确显示文本后面的不透明 div,但在 FireFox 和 Internet Explorer 中您看不到不透明 div,并且文本位于 div 的顶部。
<div id="main" class="site<?php if ( $with_sidebar ) : ?> site-with-sidebar<?php endif; ?>">
<div id="content" class="site-content">
<!----Home Content START---->
<div style="width: 980px; overflow: auto;">
<div onclick="window.location='/portfolio/architecture/architecture/';" id="item1" style="width:453px; height:400px; background-image:url('http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png'); float: left; margin: 0 20px 20px 0;">
<div class="item-title" style="width:inherit; position: relative; top:350px; height: 50px; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(232,232,232,0.8)), color-stop(1, rgba(214,214,214,0.8)) ); display: table-cell; vertical-align: middle;" >
<center> Architecture </center>
</a>
</div>
</div>
最佳答案
这是因为您的后台容器正在使用特定于供应商的前缀样式 -webkit-gradient
,FF 和 IE 将忽略它。这个问题 (Linear-gradient works only with -moz vendor prefix) 将为您提供正确实现渐变所需的所有供应商前缀。
关于html - Div 在 FF 或 IE 中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29079433/