堆栈内存溢出
  繁体   English   中英

边界半径在IE9中不起作用

[英]Border-radius will not work in IE9

 原文  2013-10-20 02:15:45  0   1    javascript/ html/ css

问题描述

我有一个网站，我的容器框上有圆角，该圆角可在除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：横幅在容器边框和横幅图片之间有一个小间距，想知道如何解决？

1 个解决方案

解决方案1
 0 已采纳  2013-10-20 02:25:52

修正HTML开启顺序中的顺序，应该是 

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

但是据我所知（我不是浏览器专家），实际上确实存在 IE和border-radius问题。

如果您的IE实际上切换到兼容模式，则可以通过发送以下响应标头来禁止此操作： 

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

请注意，此操作必须在服务器端完成，在这种情况下，META标头将没有用，因为为时已晚。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用特征检测来了解浏览器是否支持border-radius？ （包括IE9） PDFMake 的边框半径 有没有办法在IE中获取边框半径和渐变背景？ DIV元素的Border-Radius在IE8中不起作用 边框半径（如果边框上有图像） 创建对角线边框半径 canvas 元素上的边框半径 具有边界半径的角落中的事件 Bootstrap Panel Border-Radius 谷歌图表时间轴元素边框半径
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM