0

私のウェブサイトはThetotempole.caにあり、コンテンツ ボックスの横に 2 つの動物の画像 (リンク付き) があり、IE では各画像の青い境界線が消えません!

ここに私のHTMLがあります:

<!doctype html>
<head>
<title>The Totem Pole News</title>
<meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news.">
<link href="thecss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<link rel="icon" type="image/ico" href="images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="socialmediaplugins">
<div id="facebook"><div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></div>
<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="contentbox" align="Center">
<div id="banner" align="Center">
</div>
<div id="navbar">
<a href="#">Content</a>
<a href="#">News</a>
<a href="#">Music</a>
<a href="#">Movies</a>
<a href="#">Video Games</a>
<a href="#">Stocks</a>
</div>
<div id="navbar2">
<a href="#">About Us</a>
<a href="#">Feedback</a>
<a href="#">Subscribe</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
  <input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}">
  <input class="css_btn_class" type="submit" value="Search">
  <input type="hidden" name="sp_a" value="sp1005092e">
  <input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
<div id="owl">
</div>
<div id="musicbox"><h1>
Music</h1>
<h2>Pusha T - Numbers On the Board</h2>
<p>Good song</p>
</div>
<!--End of music box (Lexi is cool)-->
<div id="moviebox">
<h1> Movies</h1>
<h2>Tangled</h2>
<p>Tangled is a good movie.</p>
</div>
<div id="owl"> <img src="images/owl.gif" alt="Music page" usemap="#Map">
    <map name="Map">
      <area shape="poly" coords="-1,395,104,328,154,310,181,309,195,320,223,343,232,308,229,283,218,265,216,241,219,211,221,181,214,154,211,133,226,123,232,106,235,89,236,72,238,54,229,43,215,50,207,41,192,53,185,69,174,80,153,84,121,77,90,71,80,68,60,75,49,77,31,75,1,76" href="music.html">
    </map>
</div>
<div id="wolf">
<img src="images/wolf.gif" alt="Movies page" usemap="#Map2">
<map name="Map2">
  <area shape="poly" coords="3,270" href="movies.html">
  <area shape="poly" coords="4,22,45,50,68,65,98,71,131,84,156,87,171,73,179,61,189,54,202,63,213,78,224,106,237,122,253,138,265,148,267,164,272,179,290,193,306,212,324,219,341,231,351,246,338,260,324,263,314,265,297,268,293,275,304,278,305,288,299,300,285,304,267,297,243,284,217,269,196,263,173,261,146,258,128,263,115,273,106,278,92,274,69,267,49,264,39,266,15,270,5,270" href="movies.html">
</map>
</div>
<!-- This is the end of the contentbox -->
</div>
<!-- This is the end of the container div -->
</div>
</body>
</html>

CSS は次のとおりです。

body { 
    margin-bottom:0px;
    background-color:#ef4833;
    font-family: Verdana, Geneva, sans-serif;
}

a {
    outline : none;
    border: 0;
}

a:hover {
    color: #0FC;
}

#container {
    width: 1000px;
    height:1000px;
    position:relative;
    margin-right: auto;
    margin-left: auto;
    z-index:1;
}

#facebook {
    position:fixed;
    right:100px;
    z-index:15;
}

#twitter {
    position:fixed;
    z-index:16;
    right:120px;
}
#google {
    position:fixed;
    top:7px;
    right: 135px;
}

#socialmediaplugins {
    text-align: right;
    position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
    margin: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index:14;
}

#searchbox {
    background-color:#01bff6;
    border-radius:4px;
}

#searchbox:hover {
    background-color:#76b618;
    border-radius:4px;
}

#searchbox:active {
    background-color:#01bff6;
    border-radius:4px;
}

#contentbox {
    background-color:black;
    background-image:url(images/wooden.jpg);
    width: 1000px;
    height: 1000px;
 box-shadow:2px 2px 10px 10px #060606;
 -webkit-box-shadow:2px 2px 10px 10px #060606;
 -moz-box-shadow:2px 2px 10px 10px #060606;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);

}

#banner {
    background-image:url(images/totempolebanner.gif);
    position:absolute;
    top:25px;
    width:768px;
    height:120px;
    left:116px;
}

#navbar {
    float: left;
    position: absolute;
    top: 145px;
    left: 108px;
    width: 418px;

}

#navbar2 {
    position: absolute;
    top: 144px;
    left: 587px;
    width: 349px;
}

#searchbar {
    position: absolute;
    top: 23px;
    left: 885px;
    width: 118px;
    height: 69px;
}

#musicbox {
    position: absolute;
    top: 165px;
    width:1000px;
    height:325px;
    border-top: black 2px solid;
    z-index: 2;
    background-color:green;
}

#moviebox {
    position: absolute;
    top: 492px;
    width:1000px;
    height:325px;
    border-top: black 2px solid;
    border-bottom: black 2px solid;
    z-index: 2;
    background-color: blue;
}

.css_btn_class {
    font-size:9px;
    position: relative;
    top:0px;
    right:4px;
    width:90px;
    height:25px;
    font-family:Verdana;
    font-weight:normal;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #35d914;
    padding:7px 24px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
    background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
    background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
    background-color:#ff9d00;
    color:#ff0000;
    display:inline-block;
    text-shadow:0px 0px 1px #117cff;
    -webkit-box-shadow: 0px 0px 0px 0px #117cff;
    -moz-box-shadow: 0px 0px 0px 0px #117cff;
    box-shadow: 0px 0px 0px 0px #117cff;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:hover {
    width:90px;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
    background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
    background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
    background-color:#ffe711;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:active {
    position:relative;
    width:90px;
    top:1px;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}
/* This css button was generated by css-button-generator.com */
#owl {
    z-index: 3;
    position: absolute;
    top: 91px;
    left: 1001px;
    width: 265px;
    height: 397px;
    border: 0;
    outline: none;
    background-image:url(images/owl.gif);
}

#wolf {
    z-index: 3;
    position: absolute;
    top: 497px;
    left: 926px;
    width: 512px;
    height: 393px;
}

ありがとうございました！！

4

4 に答える 4

1

使用しborder:none;ないでくださいborder:0;

CSS:

img {border:none;}
于 2013-10-30T15:45:08.490 に答える
0

これを CSS に追加します。

a img {
 border:none;
 outline:none;
}
于 2013-10-30T15:44:36.350 に答える
0

境界線やアウトラインが不要な画像にクラスno-borderを追加し、CSS に次を追加します。

img.no-border {
    border: none !important;
    outline: none !important;

}

画像にボーダーやアウトラインを付けたくない場合は、CSS に次を追加します。

img {
    border: none !important;
    outline: none !important;

}
于 2013-10-30T15:44:40.163 に答える
0

やってみました：

img { border:0; }
于 2013-10-30T15:44:44.677 に答える