Question

我创建了一个背景为渐变的页面，我在渐变上有3个div，背景为白色，这三个是三列。在三列中有文字，这看起来它应该在谷歌浏览器中，在Firefox中的渐变更长，因此文本更高，与Internet Explorer相同。

我希望所有内容都与所有最新的桌面浏览器相同。这是HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
    <div class='container'>
        <div class='article1'>
            <h1 >Col1</h1>
                <div class="textHeight">
                <p >Nos aseguraremos de que para publicar un comentario. Pero la necesidad ahora que funcionario regional policial en los Estados Unidos y el diseño. La escuela de negocios de postgrado o de desarrollo profesional a través del valle de la tierra. Sin impacto escala caliente, el autor y la propaganda corporativa. Mañana flechas peinado garganta. El hogar de algunos, pero no es el principal, tablero ahora. No empujar un vehículo. Algunas pólizas para los desarrolladores. Pero la necesidad ahora egestass reservados.
                </p>
                </div>
    </div>

        <div class='article2' >
            <h1 >Col2</h1>
                <div class="textHeight">
                <p >"Nos aseguraremos de que para publicar un comentario. Pero la necesidad ahora que funcionario regional la aplicación de la ley en los Estados Unidos."  
                </p>
                </div>
    </div>

        <div class='article3'>
            <h1 >Col3</h1>
                <div class="textHeight article3TextWidth">
                <p>Es importante crear una amplia gama de conocimientos para un teléfono. Hasta antes de la película, pero los principales miembros de la vida, el tiempo no está. El sistema dinámico de almacenamiento masivo y desarrollar consejero de desarrollo económico. Eventos en la general. Más competencia en el mercado de seguros, sino también a la hora de hacer compras en el centro. Afiliaciones Profesionales churn de clase por nuestro sindicato, himenaeos muy principiantes. Esto es sólo por conveniencia. Afiliaciones Profesionales churn de clase por nuestro sindicato.
                </p>
                </div>
    </div>      
        </div>

</body>
</html>

CSS

h1{
font-family:'Georgia';
font-size:0.940em;
padding:0 0 0px 10px;
}

p{
font-family:'Georgia';
padding: 10px 10px 0px 10px;
font-size: 0.680em;
line-height: 2em; 
letter-spacing:0.7px;
}


.container {
    position:relative;
    max-width:800px;
    max-height:600px;
    overflow: hidden; 
    padding: 21px 18px 0px 0px; 
    background: linear-gradient(to bottom, #800000 0%,#3D3D3D 100%);
    margin-left:20px;
    margin-top:20px;
    background: -ms-linear-gradient(#800000, #3D3D3D);/*For IE10*/
    background: linear-gradient(#800000, #3D3D3D);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#800000', endColorstr='#3D3D3D');/*For IE7-8-9*/ 
    height: 1%;/*For IE7*/
}

.article1 { 
    position:relative;
    height: 500px;
    width: 177px; 
    float: left;
    margin: 0 0 21px 21px; 
    background-color: #fff; 
    padding: 10px;
}

.article2{
    position:relative;
    height: 500px;
    width: 177px; 
    float: left; 
    margin: 0 0 21px 21px; 
    background-color: #fff;
    padding: 10px;
}

.article3 {
    position:relative;
    height: 500px;
    width: 320px;
    float: left; 
    margin: 0 0 21px 21px; 
    background-color: #fff; 
    padding: 10px;
}

.article3TextWidth{
width:300px;
}


.textHeight{
height:420px;
}

如果这是最好的方法，请告诉我，还是有其他方法可以做到这一点？我需要它在所有最新的浏览器上工作。问题主要在于Internet Explorer，因为它在IE7,8和10上呈现的方式不同.IE7完全删除了底部的渐变。

感谢。

Answer 1

您可以参考令人惊叹的Ultimate CSS Gradient Generator来为您绘制渐变时生成的跨浏览器代码。

它还具有 从CSS导入 功能，我已经习惯对您的渐变进行逆向工程并生成其跨浏览器版本：

兼容性在评论中指定

background: rgb(128,0,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(128,0,0,1) 0%, rgba(61,61,61,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(128,0,0,1)), color-stop(100%,rgba(61,61,61,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(128,0,0,1) 0%,rgba(61,61,61,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(128,0,0,1) 0%,rgba(61,61,61,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(128,0,0,1) 0%,rgba(61,61,61,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(128,0,0,1) 0%,rgba(61,61,61,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */

查看正在运行的演示：http://jsfiddle.net/gVByg/1/

这是您在旧浏览器AFAIK上获得的最佳效果。

在浏览器上呈现的HTML CSS问题

1 个答案: