在 IE8 中，如何将 Telerik 网格与 YUI3 网格一起使用而没有任何重叠？

Question

我正在使用最新版本的Yahoo User Interface 3 (YUI)。我正在使用reset, fonts, grids and base stylesheets。我也在使用最新版本的Telerik MVC extensions。我正在使用razor view engine 在ASP.NET MVC 3 做我的网站。浏览器是Internet Explorer 8。

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

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

<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"/>

我只在视图中添加了一些基本标记（颜色仅用于显示目的）：

<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 的角度来看，这实际上是非常糟糕的。它基本上相当于使用 Dreamweaver 挂钩的 asp.net。

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