在 MVC3 中构建一个相当基本的网站(目前有点矫枉过正，但希望它易于扩展)。无论如何，我已经尝试了我知道该怎么做，但我并不是非常擅长 javascript。我在网上搜索并尝试了几个不同的 javascript 选项，但似乎无法解决我的 Chrome 问题。
我看到有人建议使用背景图像来提供我想要的东西的错觉，但我更愿意通过 jquery 和 css 修改来完成它。如果您需要更多信息，请告诉我...我仍然感到震惊的是 Chrome 是给我带来问题的浏览器...
布局页面的 javascript/html...
<head>
<meta content="charset=utf-8" />
<title>@ViewBag.Title</title>
<link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.ico")" />
<link rel="icon" type="image/gif" href="@Url.Content("~/Content/images/animated_favicon1.gif")" />
<link href="@Url.Content("~/Content/CSS/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="body">
<div id="SiteLogo">
<img alt="Logo" src="@Url.Content("~/Content/images/Logo.png")" height="100" width="100" />
</div>
<div id="SiteBanner">
<br />
<em>@quote[quoteSelect]</em>
<br /><br />
<em id="BannerQuoteBy"> @quoteBy[quoteSelect]</em>
</div>
<div class="ClearBoth"></div>
<div id="NavAndBody">
<div id="SiteLinkColumn">asdf
</div>
<div id="SiteBody">
@RenderBody()
</div>
<div class="ClearBoth"></div>
</div>
</div>
<script type="text/javascript">$(document).ready(function(){$("#SiteLinkColumn").css({'height':($("#SiteBody").height()+'px')});})</script>
<script type="text/javascript">alert($("#SiteBody").height());</script>
</body>
然后部分页面看起来像...(无论我使用哪个页面，它们都不对齐)。
@{
ViewBag.Title = "About";
}
<div class="FloatLeft" style="padding:10px;">
<img width="350px" src="@Url.Content("~/Content/images/Logo.png")" alt="Logo" />
</div>
<p>
<img alt="Bullet" width="15px" src="@Url.Content("~/Content/images/Logo.png")" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat enim, gravida ac hendrerit non, ornare a purus. Integer sit amet lacinia odio. Morbi sit amet auctor metus. In bibendum nibh vitae orci consequat et ultrices neque fermentum. Aliquam diam ligula, hendrerit sit amet scelerisque quis, gravida et velit. Integer in felis non dui varius convallis. Nam nec elit sit amet ligula volutpat tincidunt. Cras lacus libero, porta at commodo sed, auctor vitae quam. Fusce nec metus dolor, eu fringilla ipsum. Aliquam nec commodo urna.
</p>
在 javascript 开始使用之前应用于 div 的 css...
#SiteLinkColumn {
height: auto;
width: 98px;
float: left;
border: 1px solid #97F78A;
}
#SiteBody {
float: left;
height: 100%;
width: 798px;
border: 1px solid #97F78A;
margin-left: 10px;
}
此外，我还应要求添加了警报...我还在 document.ready 上添加了警报。在 Chrome 中，警报是在图像填充之前生成的(firefox 和图像填充后的 ie 警报)并且图像导致 div 扩展所以我猜这是问题并确认它我从其中一个删除了所有图像页面，然后它在所有三个浏览器中都正确排列。
但是，我不知道有什么方法可以解决这个问题，所以如果有人能给我指出正确的方向，或者如果你知道发布它的解决方案......(我正在使用的 jquery 版本有什么做这个？？？)
最佳答案
在我根据@Coulton 的提示找到问题后找到了解决方案... Official way to ask jQuery wait for all images to load before executing something
需要使用 $(window).load 而不是 $(document).ready
关于jQuery CSS div 高度在 Chrome 中不对齐(Firefox 和 IE 都可以)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7736923/