Fatal编程技术网
  • jquery/
  • jQuery CSS div height未在Chrome中对齐（Firefox和IE都可用）

jQuery CSS div height未在Chrome中对齐（Firefox和IE都可用）

jquery css asp.net-mvc-3

jQuery CSS div height未在Chrome中对齐（Firefox和IE都可用）,jquery,css,asp.net-mvc-3,Jquery,Css,Asp.net Mvc 3,目前在MVC3中构建一个相当基本的网站有些过分，但希望它易于扩展。不管怎样，我已经尝试了我知道如何做的事情，但我并不擅长javascript。我在网上搜索并尝试了一些不同的javascript选项，但似乎没有什么能解决我的Chrome问题 我看到一个建议，使用背景图像来呈现我想要的幻觉，但我更喜欢用jquery和css修改来完成。如果您需要更多信息，请告诉我…我仍然对Chrome浏览器给我带来的问题感到震惊 布局页面的javascript/html <head> <me

目前在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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@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>
还应要求，我添加了警报…我还对document.ready发出了警报。在Chrome中，警报是在图像填充之前生成的firefox和ie警报是在图像填充之后生成的，图像导致div扩展，所以我猜这就是问题所在，为了确认这一点，我从其中一个页面中删除了所有图像，然后在所有三个浏览器中正确对齐

但是，我不知道有什么方法可以解决这个问题，所以如果有人能给我指出正确的方向，或者如果你知道解决方案，请发布它。。。我使用的jquery版本是否与此有关？

在我根据@Coulton的提示发现问题后找到了解决方案。。。

需要使用$window.load而不是$document.ready

如果我错了，请纠正我，但是如果您正在设置值，则.css代码中不应该有逗号吗$css'height'，$SiteBody.height+'px'；。我还尝试将高度作为警报$SiteBody.height输出；检查它们在每个浏览器中是否没有差异。使用html标记更新帖子，并根据警报结果进行测试 
@{
    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>

#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;
}