Html 在FF或IE中未正确显示Div

我正在一个网站上工作，在这个网站上，我在主页上设置了可以点击的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浏览器。您需要包括其他前缀和IE<10的备用项。更多信息：
这是因为您的后台容器使用的是特定于供应商的前缀样式
-webkit gradient
，FF和IE将忽略该样式。此问题（）将为您提供正确实施渐变所需的所有供应商前缀。
首先，您只有webkit（chrome，safari）的背景渐变。“不透明度”（由渐变生成）有
-webkit
前缀，因此仅适用于safari、chrome和Opera。在IE和Firefox中加入无前缀版本。