1

我有一个网站,我的容器框有圆角,圆角可以在除 IE9 之外的所有其他浏览器中使用。这是我网站的链接:http: //www.canadiannaturephotographer.com/~teacher/Kelsey/index.html ,这是 html 代码:

<!doctype html>
<head>
<html lang="en">
<meta charset="utf-8">
<meta name="description" content="Kelsey's fishing site provides information on locations to fish, fishing equipment, and fish trophies.">
<meta name="keywords" content="fishing, site, net, bait, catch, release, trophy, fish, guide, locations, location, best, educational, tutor, instruction, equip, equipment, contact, feedback, about, how, to, fishing rod, rod, fly, fly-fish, fly fishing, hook, angler, angle, angling, fishes, wire, product, electronic, gps, navigation, vest, beer, pike, salmon, wall-eye, whitefish, white fish, trout, rainbow, herring, mountain, nature, valley, river, lake, ocean, shore, coast, dock, fly fish, worm, maggot, dry, ice, season, winter, fall, summer, spring, price, best, spot, to, go, calgary, alberta, canada, north america, travel, boat, motor, buoyancy, float, floaty, bobber, bob, bobbing, weight, reel, reeling, in, big, giant, huge, massive, large, aquatic, life, aqua, water, sand, tackle, tackle box, box, live, insects, insect, hunt, outdoors, outdoorsman, wildlife, food, cook, wild, out,"> 
<title>About ~ Kelsey's Fishing Site</title>
<link href='http://fonts.googleapis.com/css?family=Scada' rel='stylesheet' type='text/css'>
<link href='cssfishsite.css' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="images/faviconn.ico">
</head>
<body>
<div id="container">

<header><center><img src="images/fishing-banner.jpg" class="topround"></center></header>

<nav>
<ul>
<li><a class="navbarr" href="index.html">About</a></li>
<li><a class="navbarr" href="fishingtrophies.html">Trophies</a></li>
<li><a class="navbarr" href="fishinglocations.html">Locations</a></li>
<li><a class="navbarr" href="fishingequipment.html">Equipment</a></li>
<li><a class="navbarr" href="contact.html">Contact</a></li>
<li><a class="navbarr" href="feedback.html">Feedback</a></li>
</ul>
</nav>

<article>
<img id="trophyp" src="images/trophypike.jpg" width="200" height="340" alt="Very large trophy pike" title="Massive trophy pike" align="left"><p id="mainpagetitle">Featured Trophy Fish</p>
<p class="paratag"><span class="description1">Length:</span> 56"</p>
<p class="paratag"><span class="description1">Weight:</span> 55 lb</p>
<p class="paratag"><span class="description1">Location:</span> Turtle Lake, Saskatchewan</p>
<p class="paratag"><span class="description1">Story:</span> This fish was caught in the open waters of Turtle lake when the fisherman caught a 36" Pike. As he was reeling the pike in, the 50 lb pike tried to eat it! The fisherman caught them both in the same net. <br /><br />&nbsp;&nbsp;&nbsp;Wow!!</p>
<br />

</article>
<br /><br />
<br />
<hr />
<br />
<div id="box32"><img id="trophyp2" src="images/E-_Kelsey'sfishingsite_images_2110612-636818-fresh-bright-trout-fish-isolated-on-a-white-background.gif" width="240" height="160.5" alt="bright trout fish" title="Fresh Bright Trout" align="right"><p><div id="textbox2"><span class="darkblue">Welcome!</span><span class="fonteh"> This website has been created to educate user's on fishing locations within Alberta, what fishing gear to utilize, etc. This website also allows users to post their trophy fish with a chance to be featured on the homepage. I hope you enjoy the website and please send feedback!</span></p></div></div>
<br />

<br />
<hr />
<p id="thirdpagetitle">Submit Your Trophy Fish!</p>
<form method="post" action="trophyfishsubmit.php" align="center">
<fieldset style="padding: 10px;" bgcolor="white"><div class="whiteformbox"><br />
<center>Name: <br /><input type="text" name="name" id="name"> <br /><blockquote></blockquote>
Location: <br /><input type="text" name="location" id="location"><br /><blockquote></blockquote>
Fish: <br /><blockquote></blockquote>
<input type="text" name="fish" id="fish">
<br />
<p>Story: </p>
<textarea cols="50" rows="9" name="story"></textarea><br />
<p>Please send your photos to my E-mail at: <br /><br />
<a href="mailto:k.nealon@hotmail.com">K.nealon@hotmail.com</a></p>
<br />
<input type="submit" name="submit" value="Send">
<p><strong><font size="2">Privacy Policy:</strong> All information gathered in this form will be kept strictly confidential and will not be exploited in any way.</font></p></center><div></fieldset>
</form>
<br />
<br /><br />



<footer><p align="center">Last Updated October 4th, 2013 ~ Calgary, Alberta</p></footer>

</div><!-- this is the container end div tag -->
<br />
<center><font face="verdana"><a class="sitemap" href="sitemap.html">Sitemap</a></font></center>
</body>
</html>

现在这里是 CSS:

#container {
    width: 761px;
    background-color: beige;
    border-radius: 10px;
    border: 1px solid black;
    margin: 0 auto;
    font-family: Verdana, Arial, Sans-serif;
}

body {
    background-color: white;
    background-image: url("images/clouds.jpg");
    background-repeat: no-repeat;
    background-position: top;
}

.description1 {
    color: #2caeec;
}

.paratag2 {
    padding-left: 180px;
    width: 410px;
}

.paratag {
    padding-left: 280px;
}

nav {
    font-style: bold;
    font-size: 0.8em;
    background-color: #b1b1b1;
    color: red;
    margin-right: 0.07px;
    margin-top: -3px;
}

#box32 {
    width: 750px;
}

#textbox2 {
    width: 400px;
    padding-left: 50px;
    height: 150px;
}

.darkblue {
    color: darkblue;
}

.fonteh {
    color: #2caeec;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

.header1s {
    color: #2caeec;
}

.boxie {
    border: 10px solid black;
    border-radius: 5px;
    width: 300px;
    height: 260px;
}

.stang {
    color: #2caeec;
}

#information1 {
    width: 430px;
    margin: auto;
}

#information24 {
    width: 600px;
    margin: auto;
    color: #2caeec;
    font-size: 1.1em;
}

#mainpagetitle {
    font-family: 'Scada', sans-serif;
    font-weight: bold;
    font-size: 3.0em;
    color: #2caeec;
    padding-left: 270px;
}

#mainpagetitle2 {
    font-family: 'Scada', sans-serif;
    font-weight: bold;
    font-size: 3.0em;
    color: #2caeec;
    padding-left: 365px;
}

#sitemap1 {
    font-family: 'Scada', sans-serif;
    font-weight: bold;
    font-size: 3.0em;
    color: #2caeec;
}

#thirdpagetitle {
    font-family: 'Scada', sans-serif;
    font-weight: bold;
    font-size: 3.0em;
    color: #2caeec;
    padding-left: 100px;
}

#thirdpagetitle1 {
    font-family: 'Scada', sans-serif;
    font-weight: bold;
    font-size: 3.0em;
    color: #2caeec;
}

a.navbarr:link {
    display: block;
    width: 122.6666666666697px;
    font-weight: bold;
    color: beige;
    background-color: #2caeec;
    text-align: center;
    padding: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px outset gray;
    border-radius: 5px;
}   /* border optional */ 

a.navbarr:visited {
    display: block;
    width: 122.6666666666667px;
    font-weight: bold;
    color: beige;
    background-color: #2caeec;
    text-align: center;
    padding: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px outset gray;
}

a.navbarr:hover {
    display: block;
    width: 122.6666666666667px;
    font-weight: bold;
    color: beige;
    background-color: #b1b1b1;
    text-align: center;
    padding: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px outset gray;
}   /* border optional */ 

a.navbarr:active {
    background-color: #b1b1b1;
    color: beige;
}

a.sitemap:link {
    font-weight: bold;
    color: #2caeec;
    text-align: center;
    padding: 1px;
    text-decoration: none;
}   /* border optional */ 

a.sitemap:visited {
    font-weight: bold;
    color: #2caeec;
    text-align: center;
    padding: 1px;
    text-decoration: none;
}

a.sitemap:hover {
    font-weight: bold;
    color: #b1b1b1;
    text-align: center;
    padding: 1px;
    text-decoration: none;
}   /* border optional */ 

a.sitemap:active {
    color: #b1b1b1;
}

article {
    margin-bottom: 0px;
    margin-top: 30px;
}

header {
    padding-bottom: 0;
    margin-bottom: 0;
}

footer {
    background-color: #2caeec;
    color: beige;
    border-radius: 0 0 10px 10px;
    margin-bottom: -20px;
}

.padding {
    padding: 10px;
}

form {
    margin-bottom: -16px;
}

fieldset {
    width: 500px;
    margin: auto;
}

.clearfloat {
    clear: both;
}

.topround {
    border-radius: 10px 10px 0px 0px;
}

p {
    font-family: arial;
    font-size: 1em;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 20px;
}

#feedbackhead {
    font-family: 'Pinyon Script', cursive;
    margin: auto;
    font-size: 3.0em;
    color: #2caeec;
}

.fsSubmitButton {
    border-top: 2px solid #a3ceda;
    border-left: 2px solid #a3ceda;
    border-right: 2px solid #4f6267;
    border-bottom: 2px solid #4f6267;
    padding: 10px 20px !important;
    font-size: 14px !important;
    background-color: #2caeec;
    font-weight: bold;
    color: beige;
    cursor: pointer;
}

.fsSubmitButton:hover {
    border-top: 2px solid #a3ceda;
    border-left: 2px solid #a3ceda;
    border-right: 2px solid #4f6267;
    border-bottom: 2px solid #4f6267;
    padding: 10px 20px !important;
    font-size: 14px !important;
    background-color: beige;
    font-weight: bold;
    color: #2caeec;
    cursor: pointer;
}

#trophyp2 {
    padding-right: 50px;
    positon: absolute;
    bottom: 555px;
}

#trophyp {
    padding-left: 35px;
}

#trophyd {
    padding-left: 25px;
}

#trophyp32 {
    padding-left: 35px;
}

PS:banner的容器边框和banner图片之间有一点空隙,想知道我该如何解决?

4

1 回答 1

0

修复 HTML 打开序列中的序列,它应该是

<!doctype html>
<html lang="en">
<head>

但据我所知(而且我不是浏览器专家)实际上存在IE 和边框半径的问题。

如果您的 IE 实际切换到兼容模式,您可以通过传输此响应标头来禁止此操作:

header('X-UA-Compatible: IE=edge');

请注意,这必须在服务器端完成,在这种情况下,META 标头将没有用,因为它来得太晚了。

于 2013-10-20T02:25:52.813 回答