Div 在 FF 或 IE 中未正确显示答案

【问题标题】：Div not showing correctly in FF or IEDiv 在 FF 或 IE 中未正确显示
【发布时间】：2015-03-17 01:47:55
【问题描述】：

我正在开发一个网站，在该网站上，我将主页上的 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(chrome, safari) 的背景渐变
“不透明度”（由渐变生成）具有 -webkit 前缀，因此仅适用于 Safari、Chrome 和 Opera。还包括无前缀版本以考虑 IE 和 Firefox。

标签： html css internet-explorer firefox

【解决方案1】：

这是因为您的后台容器使用的是供应商特定的前缀样式-webkit-gradient，FF 和 IE 将忽略该样式。这个问题 (Linear-gradient works only with -moz vendor prefix) 将为您提供正确实现渐变所需的所有供应商前缀。

【讨论】：

【解决方案2】：

您的渐变只是设置为 webkit 浏览器。您需要包含其他前缀和 IE https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

【讨论】：