Twitter ブートストラップを使用してポートフォリオ サイトを構築しています。コードを使用して画像ギャラリー内に div ボックスを作成すると、Firefox と Google Chrome では問題なく表示されますが、Internet Explorer では画像が大きく表示されます。大きくなり、画像は左右ではなく下向きになります。私のイメージがより大きく拡大するということは、オリジナルよりも大きく拡大するということです。
これが私が使用しているCSSコードです(このコードは、CSS div画像ボックスを作成するために使用されます):
body {
background:#F5F3F0;
color:#555;
font-family: 'News Cycle', sans-serif;
font-weight: 400;
font-size: 10pt;
margin: 0;
}
.colnode {
height: 100%;
width: 215px;
float: left;
margin: 10px;
z-index: 1;
}
.colnodefull {
height: 200px;
width: 230px;
float: left;
margin: 0px -5px 0px 15px;
z-index: 1;
}
#colnodemug {
overflow: auto;
float: left;
margin: auto;
width: 100%;
text-align: center;
}
.container2 {
width:1335px;
background: #fff;
margin: -130px auto;
overflow: auto;
padding-bottom: 50px;
box-shadow: 10px 10px 20px #cdcdcd;
-moz-box-shadow: 0px 0px 20px #cdcdcd;
-webkit-box-shadow: 0px 0px 20px #cdcdcd;
}
#middle {
overflow: auto;
padding-bottom: 0px;
width: 100%;
}
middle img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
div.scroller {
overflow: hidden;
width: 930px;
position: inherit;
}
/*div.scroller*/ div.section {
float:left;
height: 100%;
overflow:hidden;
padding: 80px 0 10px 245px;
width:700px;
font-size: 10pt;
}
div.scroller div.content {
width:20000px;
}
div#section {
background:none repeat scroll 0 0 black;
}
div.controls {
height: 600px;
width: 230px;
float: left;
margin: 80px -5px 0px 15px;
position: fixed;
}
div.controls a:hover {
/*border-bottom: 5px #99cccc solid;
opacity:.5;*/
}
そして、ここに私が使用しているHTMLコードがあります:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Greg's Portfolio</title>
<meta name="description" content="Greg's Portfolio Website">
<link href="css/twitter-bootstrap.css" media="screen" rel="stylesheet">
<link href="css/column.css" media="screen" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
margin-right: -400px;
}
</style>
</head>
<h1>Greg's Portfolio</h1>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li><a href="homepage.htm">Home</a></li>
<li><a href="about_me.htm">About Me</a></li>
<li><a href="contact_me.htm">Contact Me</a></li>
</div>
</div>
</div>
</body>
<body>
<div class="container2">
<div class="colnodemug">
<a href="good_lust_chuck_description.htm"><img src="images/Life_Webpage.png" width="300px" height="300px"/></a>
<a href="how_high_description.htm"><img src="images/how_high.jpg" width="300px" height="300px"/></a>
</div>
</div>
</body>
</html>