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

Question

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

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

这是我正在使用的 stylesheers：

<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。

让微软自动生成标记/CSS/JS，并想象它足够灵活，可以与其他库很好地配合，这可能有点白日梦，在我经历过的 90% 的情况下，你最好不要使用它（抱歉，我是消极先生，我有很多解决 Telerik 问题的经验 - 而且大多数时候没有快速或简单的答案）。