css - 在 IE8 中，如何在没有任何重叠的情况下使用 Telerik 网格和 YUI3 网格？

Question

我正在使用最新版本的 Yahoo User Interface 3 (YUI)。我正在使用 重置、字体、网格和基本样式表。我还在使用最新版本的 Telerik MVC 扩展。我正在使用 razor View 引擎 在 ASP.NET MVC 3 中制作我的网站。浏览器是 Internet Explorer 8。

我的布局有问题，但不确定是什么原因造成的。我有页眉和页 footer 分，内容部分由右列和左列组成。

这是我正在使用的样式表:

<link type="text/css" href="/Content/2011.3.1115/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/2011.3.1115/telerik.webblue.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssreset-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssfonts-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssgrids-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssbase-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/mystylesheet.css" rel="stylesheet"/>

我只是在我的 View 中添加了一些基本标记(颜色仅用于显示目的):

<div id="hd" style="background-color:Aqua;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<div class="yui3-g">
     <div class="yui3-u" id="nav" style="background-color:Yellow;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
     <div class="yui3-u" id="main" style="background-color:Lime;">

          @(Html.Telerik()
               .Grid<GrantApplicationListViewModel>()
               .Name("grdGrantApplications")
               .Columns(column =>
               {
                    column.Bound(x => x.Id)
                         .Title("Ref #");
               })
               .DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxGrantApplicationsBinding", "Home"))
               .Pageable(paging => paging.PageSize(20))
          )

     </div>
</div>
<div id="ft" style="background-color:Aqua;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
@(Html.Telerik()
     .ScriptRegistrar()
     .jQuery(false)
)

网格加载了 10 条记录。加载后它与我的页脚重叠。我在 IE9 中检查过它，看起来不错，页脚在网格下方。但在 IE8 中，网格越过页脚。我怎样才能让它在 IE8 中正确显示？ IE8 在显示标记时是否存在错误？

更新:

这就是我的样式表中的所有内容。其余的在上面提到的样式表中。这是一个非常基本的布局。我的原始布局与上面类似，但它也有其他样式，所以我删除了它的所有内容以确保不是我的样式导致了这个问题。

body{margin:auto;width:1000px;}
#nav{width:250px;}
#main{width:750px;}

Answer 1

作为前端开发人员，我可能建议永远不要使用 Telerik。从 HTML/CSS 的 Angular 来看，它实际上非常糟糕。它基本上相当于使用 Dreamweaver Hook 的 asp.net。

让微软自动生成 markup/css/js 并想象它足够灵活以与其他库一起玩可能有点白日梦，在我经历过的 90% 的情况下你会过得更好不使用它(很抱歉成为否定先生，我有很多解决 telerik 问题的经验 - 大多数时候没有快速或简单的答案)。