我在website上的猫图像在Internet Explorer（v11）上查看时远远低于所有其他图像。在Chrome中查看时看起来很完美。为了开发这个网站，我使用了预定义的bootstrap css类，以及我自己的一些。不幸的是，我不知道为什么这个图像远低于IE中的其他图像。
这是我自己的CSS样式表：
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.text-vertical-center {
display: table-cell;
text-align: center;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 3.3em;
font-weight: 500;
vertical-align: middle;
padding-top: 2%;
}
/* Custom Button Styles */
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255,255,255);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
color: #333;
background-color: rgba(255,255,255,0.8);
}
/* Custom Horizontal Rule */
hr.small {
max-width: 100px;
}
/* Side Menu */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
right: 0;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Header */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(http://www.jpdirollphotography.com/Galleries/Pittsburgh/Skyline/i-t2BmHTp/1/XL/Black%20and%20Gold%20Fog%20Pittsburgh%20Clemente%20Bridge-XL.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color: #404040 ;
}
/* About */
.bg-primary{
background-color: #FF9900;
}
.callout{
vertical-align: middle;
}
.about {
padding: 50px 0;
}
.fa-linkedin{
color: #404040 ;
}
.fa-github{
color: #404040 ;
}
.fa-facebook{
color: #404040 ;
}
/* Services */
.fa-gear{
color: #404040 ;
}
.fa-compass{
color: #404040 ;
}
.fa-flask{
color: #404040 ;
}
.fa-key{
color: #404040 ;
}
.fa-cloud{
color: #404040 ;
}
.fa-shield{
color: #404040 ;
}
.services {
padding: 50px 0;
}
.service-item {
margin-bottom: 30px;
}
/* Callout */
.callout {
display: table;
width: 100%;
height: 400px;
vertical-align: middle;
background: url(http://img03.deviantart.net/d652/i/2013/002/5/3/turtle_by_sweetlittlesmiles-d5q7bm5.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color: white;
background-color: #404040;
padding-top: 7%;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 30px;
}
.img-portfolio {
margin: 0 auto;
}
.img-portfolio:hover {
opacity: 0.8;
}
/* Call to Action */
.call-to-action {
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
/* Footer */
footer {
padding: 100px 0;
}
这是我的HTML ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!--- Why are you looking down here? -->
<title>
Christopher Diehl Portfolio
</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FAvicon code -->
<link rel="icon"
type="favicon/png"
href="http://example.com/myicon.png">
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
<i class="fa fa-bars">
</i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
<i class="fa fa-times">
</i>
</a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >
Home
</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >
Languages
</a>
</li>
<li>
<a href="#interests" onclick = $("#menu-close").click(); >
Interests
</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >
About
</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >
Contact
</a>
</li>
</ul>
</nav>
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<h1>
Christopher Diehl
</h1>
<h3>
Software Developer & Student
</h3>
</div>
</header>
<!-- About -->
<section class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>
Bill Gates
</h2>
<p class="lead">
Software is a great combination between artistry and engineering.
</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>
Favorite Languages
</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-key fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Java
</strong>
</h4>
<p>
Experience using Java for:
<br>
Encryption, Servlet Creation, Data Manipulation, Database Management.
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-cloud fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
HTML
</strong>
</h4>
<p>
Knowledge of Website Development..
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-gear fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Assembly
</strong>
</h4>
<p>
Programmed Simon Says game, calculator, and more in Mips
<br>
Mips CPU design in Logisim
</p>
<a href="#" class="btn btn-light">
Learn more
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-shield fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Willigness To Learn
</strong>
</h4>
<p>
Always excited to learn and am currently delving into C and Python
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center" >
<h1 class= "orange-text" >
Studying Comp Sci at Rutgers
<br>
Employer: Dulles Technology Partners ©
</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 id="interests" >
Interests
</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item" style ="vertical-align: middle">
<img class="img-portfolio img-responsive img-rounded" id="car-picture" src="http://orig12.deviantart.net/e419/f/2009/101/9/6/honda_s2000_wallpaper_by_speedx07.jpg" >
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="http://www.blogcdn.com/massively.joystiq.com/media/2012/02/blizz-1330538518.jpg">
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="https://sitespex.com/wp-content/uploads/2015/05/ubuntu.jpeg">
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="http://people.ucsc.edu/~jlolonis/snow_cat.jpg">
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>
About
</h1>
<h4 id ="about">
Christopher is currently studying Computer Science at Rutgers- New Brunswick with the intent of fulfilling a concentration in Computer Security.
<br>
He is currently employed by Dulles Technology Corporation as a Software Developer in New Jersey.
<br>
For more information on his skills and samples of his work follow the links below.
</h4>
</div>
</div>
</div>
</aside>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4>
<strong>
Christopher Diehl
</strong>
</h4>
<p id = "contact">
Flemington
<br>
New Jersey
</p>
<ul class="list-unstyled">
<li>
<i class="fa fa-phone fa-fw">
</i>
(570) 421-2638
</li>
<li>
<i class="fa fa-envelope-o fa-fw">
</i>
<a href="diehl.chris@rocketmail.com">
diehl.chris@rocketmail.com
</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="https://www.linkedin.com/profile/view?id=338507614&trk=nav_responsive_tab_profile">
<i class="fa fa-linkedin fa-fw fa-3x">
</i>
</a>
</li>
<li>
<a href="https://github.com/ChristopherDiehl">
<i class="fa fa-github fa-fw fa-3x">
</i>
</a>
</li>
<li>
<a href="https://www.facebook.com/chris.diehl.35">
<i class="fa fa-facebook fa-fw fa-3x">
</i>
</a>
</li>
</ul>
<hr class="small">
<p class="text-muted">
Copyright © Christopher S. Diehl 2015
</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js">
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js">
</script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
}
);
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
}
);
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}
, 1000);
return false;
}
}
}
);
}
);
</script>
<!-- Makes Interest pictures same hight-->
<script>
$(window).load(function() {
var pictureHeight = $("#car-picture").height();
$(".picture").css('height', pictureHeight+ "px");
//$("#menu-bar").css("padding-top", BannerpadSpace);
}
)
$(window).resize(function(){
pictureHeight = $("#car-picture").height();
$(".picture").css('height', pictureHeight+ "px");
}
)
</script>
</body>
</html>
谢谢
答案 0 :(得分：1)
您包含的图像比您显示的图像大得多。浏览器必须缩小它们，IE似乎在舍入图像高度方面存在一些问题。当您查看IE开发工具时，您可以看到第一个图像的高度实际为343.11px。所以第三张图片＆＃34; edge＆＃34;对于那些0.11px并进入下一列，这导致猫图像在第三行。
准备与您想要显示的尺寸相同的所有图像。
同时检查W3C validator。您的标记中有一些错误。