0
在MVC3中构建一个相当基本的网站（此时过度杀伤，但希望它可以轻松扩展）。无论如何，我已经尝试了我知道该怎么做，但我并不擅长JavaScript。我在网上搜索并尝试了一些与JavaScript不同的选项，但似乎没有解决我的Chrome问题。在Chrome浏览器（火狐浏览器和IE浏览器都在工作）中jQuery CSS div高度不匹配
我看到了一个建议，使用背景图片给我想要的幻觉，但我更喜欢用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;
}
另外的要求我增加了警报......我还做了文档警报。准备。在Chrome中，警报是在图像填充之前生成的（Firefox在图像填充后即发出警报），并且图像会导致div扩大，所以我猜这是问题并确认它，我从所有图像中删除了所有图像页面，然后它在所有三个浏览器中正确排列。
但是，我不知道有什么办法来解决这个问题，所以如果有人能指出我正确的方向，或者如果你知道解决方案张贴...（我使用的jQuery版本会有任何与此???做）
什么错觉！ – thecodeparadox
发布您的html标记也 –
如果我错了，请纠正我，但是如果您要设置该值，那么在'.css（）'代码中不应该有逗号？ '$（“＃SiteLinkColumn”）。css（'height'，（$（“＃SiteBody”）。height（）+'px'））;'。 – Luke