背景をグラデーションとしてページを作成し、グラデーションに 3 つの列である背景が白の 3 つの div を作成しました。3 つの列内にテキストがあり、これは 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;
}
これが最善の方法なのか、それとも別の方法があるのか教えてください。これは、最新のすべてのブラウザで動作する必要があります。IE7、8、および 10 ではレンダリングが異なるため、主に Internet Explorer に問題があります。IE7 では、下部のグラデーションが完全に削除されます。
ありがとう。