CSS Pie と iE8 に奇妙な問題があり、Pie は border-radius プロパティを要素に正しく適用しますが、要素の背景 (グラデーションまたは単色) が境界線からはみ出し、上部にあるように見えます。実際の要素。
私はしばらく Pie CSS を使用しています。PHP 環境で使用する場合は、pie.php が必要であり、Pie の正しい場所がサイトのルートにあることは知っています。私はこの問題を抱えたことはありませんでしたが、レスポンシブフレームワークを使用しているため、この問題が発生しています。この構造で作成したボタン:
<p class="btn">
<a href="#">Learn More</a>
</p>
CSS:
.btn {
position: relative;
display: inline-block;
width: auto;
height: 36px;
font-size: 16px;
line-height: 36px !important;
border: 1px solid #a0c401;
border-radius: 4px;
cursor: pointer;
margin: 0 0 20px 0;
-webkit-box-shadow: inset 0 1px 1px #fff,
0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
box-shadow: inset 0 1px 1px #fff,
0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
background: #c0eb03; /* Old browsers */
background: -moz-linear-gradient(top, #c0eb03 0%, #a8cd01 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0eb03), color-stop(100%,#a8cd01)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* IE10+ */
background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0eb03', endColorstr='#a8cd01',GradientType=0 ); /* IE6-9 */
-pie-background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%);
behavior: url("PIE.php");
z-index: 10 !important;
}
.btn a, .btn:hover a {
display: block;
text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
text-transform: uppercase;
font-family: 'AvantGardeGothicITCW01D 731075';
padding: 0 20px;
text-align: center;
text-decoration: none;
color: #6a8100;
text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
}