1

私はこのサイトhttp://www.claybrookanimalfeeds.co.uk/contact.phpに取り組んでおり、右側のショップの営業時間ボックスの角を丸くしたいと考えています。

現在、Firefox、Chrome、Opera で動作させることができましたが、何らかの理由で Internet Explorer では動作しません。さまざまな方法（PIEを含む）を試しましたが、どれもうまくいかないようです。コードを翻訳して間違って適合させたか、単に機能していないかのどちらかです。

どんな助けでも大歓迎です。

これが私が使用しているcssです（かなり長いです）、角を丸くしたいコードの部分は営業時間セクションの下にあります

@charset "utf-8";
/* CSS Document */
body {
background-color:beige;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-color:beige;
margin:0 auto;
}
/*Header*/
#header {
height:150px;
}

h1 {
text-align:center;
color:darkgoldenrod;
font-size:36px;
}

#p1 {
text-align:center;
color:darkgoldenrod;
font-size:18px;
}

/*Header End*/

/*Navigation Bar*/
#nav {
width:100%;
float:left;
margin: 0 0 1em 0;
padding:0;
background-color:darkgoldenrod;
border-bottom:1px solid #ccc;  
}

#nav ul {
list-style:none;
width:800px;
margin:0 auto;
margin-left:100px;
padding:0; 
}

#nav li {
float:left;
width:250px;
text-align:center;
}

#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:bold;
color:white;
border-right:1px solid #ccc; 
}

#nav li:first-child a {
border-left:1px solid #ccc; 
}

#nav li a:hover {
color:white;
background-color:blue; 
}

/*Navigation Bar End*/
#content {
width:675px;
float:left;
margin-left:10px;
padding:10px;
}

/*Slideshow*/
#slide-show {
margin-left:150px;
}

#slide-images {
display:block;
margin:0px;
padding:0px;
width:300px;
height:224px;
overflow:hidden;
}

#slide-images li {
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}

#slide-images li img {
display:block;
background-color:#FFFFFF;
}
/*Slideshow End*/

/*Opening Times*/
#openingtimes
{
float:right;
height:200px;
width:200px;
background-color:white;
text-align:center;
border-style:solid;
border-width:medium;
border-color:black;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000;
}
/*Opening Times End*/

/*Form*/
#form {
float:left;
}
/*Form End*/

/*Sidebar*/
#sidebar {
width:200px;
float:left;
margin-left:10px;
margin-bottom:25px;
background-color:tan;
text-indent:10px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
filter:
    progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=5, offy=10)
}

#sidebar li {
list-style: none;
position: relative;
height: 30px;
padding:0 20px;
background-color:tan;
color: #45371E;
line-height: 20px;
cursor:pointer;
}

#sidebar li a {
text-decoration:none;
color: #45371E;
background-color:transparent;
display:block;
} 

#sidebar li:hover {
background-color: #CD853F;
} 
/*Sidebar End*/

/*Footer*/
#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
text-align:center;
}

#footer p {
padding:10px;
}
/*Footer End*/
4

2 に答える 2

2

border-radiusプロパティは動作するIE9=+ので、動作しないよりも試している場合はIE8 <=、代わりに jQuery を使用することをお勧めします

http://www.malsup.com/jquery/corner/

また、この Web サイトを使用して、さまざまなブラウザーの CSS プロパティのサポートを確認してください。開発者にとって非常に便利です。

www.caniuse.com

于 2013-03-19T16:24:13.923 に答える
1

したがって、ie9 以降はこれをサポートします http://caniuse.com/border-radius IE6+ の場合、ポリフィルを使用できます: http://css3pie.com/

お役に立てれば。

したがって、CSSPIE を使用した例では、次のようになります。

border: 1px solid black;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url(/pie/PIE.htc);
于 2013-03-19T16:26:11.930 に答える