Question

我使用的是最新版本的Yahoo User Interface 3 (YUI)。我正在使用reset, fonts, grids and base stylesheets。我也在使用最新版本的Telerik MVC extensions。我正在ASP.NET MVC 3使用razor view engine在我的网站上进行操作。浏览器为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。

让微软自动生成标记/ css / js并想象它会足够灵活，可以与其他图书馆玩得很好，这可能有点像梦想，在90％的情况下，我经历过你感觉更好不使用它（很遗憾，先生是负面的，我有很多解决telerik问题的经验 - 大部分时间没有快速或简单的答案）。

在IE8中如何使用带有YUI3网格的Telerik网格而没有任何重叠？

1 个答案: