我创建了一个背景为渐变的页面，我在渐变上有 3 个 div，背景为白色，它们是三列。在三列中有文本，这在 Google Chrome 中看起来应该是这样，在 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 完全消除了底部的渐变。
谢谢。