Создание довольно простого веб-сайта в 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>
Применяемая CSSв div, прежде чем javascript получит в свои руки ...
#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 и т. Е. Оповещение после заполнения изображения), и изображения вызывают расширение div, поэтому я предполагаю, что это проблема, и для подтверждения я удалил все изображения из одного изстраниц, а затем он корректно выстроился во всех трех браузерах.
Однако я не знаю ни одного способа решить эту проблему, так что если кто-то может указать мне правильное направление или если вы знаете решение, публикующее его... (будет ли версия jquery, которую я использую, иметь какое-либо отношение к этому ???)