私は主に CSS の改善を目的として、会社のサイトに取り組んでいます。丸みを帯びた角や影などを作成する多くの小さな画像を削除したいと思います。CSS3 は完璧な選択ですが、それでも多くのユーザーが IE7 と IE8 を使用しているため、このサイトもそれらのために準備する必要があります。
CSS3PIE について多くの良い意見を見つけました。それをダウンロードして使用しようとしましたが、私の IE8 は協力したくありません :)。アクセスが拒否されました: PIE.htc Line: 0 Char: 0 Code: 0. ファイルを 1 つのフォルダーと別のフォルダーに配置しようとしました。サーバーとローカルでこれを確認してください。常に同じ情報を持っています。 .
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>title</title>
<link rel="stylesheet" rev="template" type="text/css" href="styles.css">
</head>
<body id="home" class="cols_One">
<div id="wrapper" class="fauxBlock">
<div id="header">
<div id="cap">
<div id="welcome"></div>
<div id="quicklinks">abc</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#cap {
padding: 0 6px;
font-size: 12px;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
margin-bottom: 2px;
text-align: right;
line-height: 25px;
background: #fcfcfc; /*non-CSS3 browsers will use this*/
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4) to(#fcfcfc)); /*old webkit*/
background: -webkit-linear-gradient(left top, left bottom, #f4f4f4, #fcfcfc); /*new webkit*/
background: -moz-linear-gradient(#f4f4f4, #fcfcfc); /*gecko*/
background: -ms-linear-gradient(#f4f4f4, #fcfcfc); /*IE10 preview*/
background: -o-linear-gradient(#f4f4f4, #fcfcfc); /*opera 11.10+*/
background: linear-gradient(#f4f4f4, #fcfcfc); /*future CSS3 browsers*/
-pie-background: ulinear-gradient(#f4f4f4, #fcfcfc); /*PIE*/
-moz-box-shadow: 0 2px 2px #d8d8d8;
-webkit-box-shadow: 0 2px 2px #d8d8d8;
box-shadow: 0 2px 2px #d8d8d8;
behavior:url(PIE.htc);
}
編集:コードサンプルを追加しました