Question

我正在使用Twitter引导程序构建我的投资组合网站，当我使用代码在图像gallary中创建一个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>

IE 10兼容性问题

0 个答案: