0

我们有一个用asp.net c#visual studio 2010制作的网站母版页。它在safari、opera、chrome、firefox和IE10中显示完美,但IE9在菜单和内容之间显示了一个大白块。

当我们按下 F12 并检查元素时,它会突出显示包含所有内容的表单(这样做是为了在其他页面上不再需要符号表单 runat=server,因为在服务器上运行的表单不止一个给出错误)。

这是网站的链接:http: //iwtsw.ehb.be/~iris.vdz/Index.aspx

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainLayout.master.cs" Inherits="MainLayout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head id="Head1" runat="server">
    <title>Website Euroquip</title>
    <link href="~/Styles/MainLayout.css" type="text/css" rel="Stylesheet" />
    <link href="~/Styles/brlnsr.ttf" />
    <link rel="shortcut icon" href="images/flavicons/favicon.ico">
    <link rel="icon" type="image/gif" href="images/flavicons/animated_favicon1.gif">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script>

        function setBodyContentMinHeight() {
            var height = $("#leftContent").height();
            $('#bodyContent').css('min-height', (height-25) + "px");
        }

        $(function () {
            setBodyContentMinHeight();
            var $sidebar = $("#leftContent"),
            $window = $(window),
            offset = $sidebar.offset(),
            topPadding = 15;

            $window.scroll(function () {

                if ($window.scrollTop() > offset.top) {
                    $sidebar.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: 0
                    });
                }
            });


        });
</script>
</head>
<body>
<form id="Form1" runat="server">
    <div id="wrapper">
        <div id="HeaderContent" class="centeredContent">
            <a href="Index.aspx" id="logoDiv">
                <img src="images/logo.png" alt="logo euroquip" style="height: 146px" />
             </a>
            <div id="menuDiv">
                <asp:Menu ID="headMenu" runat="server" DataSourceID="SiteMapDataSource1" 
                    Orientation="Horizontal" StaticDisplayLevels="2" StaticEnableDefaultPopOutImage="false"
                    StaticSubMenuIndent="16px" CssClass="headMenu" Font-Names="brlnsr" 
                    meta:resourcekey="headMenuResource1" MaximumDynamicDisplayLevels="0">
                    <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="menu"/>
                    <asp:MenuItemStyle CssClass="menu"/>
                    </LevelMenuItemStyles>
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />


            </div>

            <div id="languagesDiv"  class="styled-select shadow">
                        <form id="ddlLanguage" action="" method="post">
                        <asp:DropDownList ID="languages" runat="server" AutoPostBack="True" 
                            CssClass="ddlLanguages" 
                            onselectedindexchanged="languages_SelectedIndexChanged" 
                            meta:resourcekey="languagesResource1">
                            <asp:ListItem Text="NL" Value="nl" 
                                 />
                            <asp:ListItem Text="EN" Value="en"  />
                            <asp:ListItem Text="FR" Value="fr"  />
                        </asp:DropDownList>
                    </form>
                    </div>

        </div>

        <div id="bodyContent" class="centeredContent">
            <div id="leftContent">
                <div id="secondaryMenuDiv"  class="roundedFrame shadow blackFrame">
                    <div id="secondaryMenuDivHeader" runat="server">
                        <asp:Localize ID="Localize1" runat="server" 
                            meta:resourcekey="Localize1Resource1" Text="Wij bieden aan:"></asp:Localize></div>
                              <asp:Panel ID="MenuPanel" runat="server" meta:resourcekey="Panel1Resource1">
                              </asp:Panel>
                    </div>
                    <div id="Div1" class="roundedFrame shadow blackFrame">
                    Promoties
                </div>
            </div>
            <div id="rightContent">
               <!-- <div id="contentDiv" class="roundedFrame shadow" > -->
               <div id="contentDiv">
                    <asp:ContentPlaceHolder ID="ContentHolder" runat="server" >
                        Hier komt de content
                    </asp:ContentPlaceHolder>
                </div>
            </div>



            <div class="clearer"></div>

       </div>


       <div id="footerContent">
            <div id="footerContentCenter" class="centeredContent">
                <div id="sitemapContact" class="sitemapColumn">
                    <h1><a href="Contact.aspx"><asp:Localize ID="contact" runat="server" meta:resourcekey="contactResource1" 
                            Text="CONTACT"></asp:Localize></a></h1>
                    <div class="ColumnContent">
                    <a href="https://maps.google.be/maps?q=Industriestraat+16+3930+Hamont-Achel&hnear=Industriestraat+16,+3930+Hamont-Achel,+Limburg,+Vlaams+Gewest&gl=be&t=h&z=16&iwloc=A" target="_blank">
                    <img src="images/icons/world.png"/><p>Industriestraat 16 </br> 
                        3930 Hamont-Achel </p>
                    </a>
                    <img src="images/icons/phone.png" /><p>011 80 75 30 (t)</br>
                        011 64 61 82 (f) </p>
                    <a href="mailto:info@euroquip.be"><img src="images/icons/email.png" /><p>info@euroquip.be</p></a>
                    </div>
                </div>
                <div id="sitemapNieuwsbrief" class="sitemapColumn">
                    <a href="#nieuwsbriefEmail" onclick="document.getElementById('nieuwsbriefEmail').focus();"><h1><asp:Localize ID="nieuwsbrief" runat="server" 
                            meta:resourcekey="nieuwsbriefResource1" Text="NIEUWSBRIEF"></asp:Localize></h1></a>
                    <div id="toTo"></div>
                    <div class="ColumnContent">
                    <p>
                        <form id="nieuwsbrief" action="" method="post">
                            <input id="nieuwsbriefEmail" pattern="[^ @]*@[^ @]*" type="email" placeholder="Email" value="" />
                            <input id="nieuwsbriefEmailVerzenden" type="submit" value="OK"/>
                        </form>
                    </p>
                    <p>
                        <img src="images/icons/feed.png" /> RSS FEED
                    </p>
                    </div>
                </div>
                <div id="sitemapSiteMap" class="sitemapColumn">
                    <a href="Sitemap.aspx"><h1>SITEMAP</h1></a>
                     <div class="ColumnContent">
                     </div>
                </div>
                <div id="sitemapWebshop" class="sitemapColumn">
                    <a href="Shop.aspx"><h1>WEBSHOP</h1></a>
                    <div class="ColumnContent">
                    </div>
                </div>
                <div id="copyright">
                Copyright &copy;2013 Euroquip
                </br>
                Design by Team Kinik.
                </div>
              </div>  
        </div>


     </div>

      </form>
</body>
</html>

有谁知道我们在这里做错了什么?

谢谢!

4

2 回答 2

0

删除height:100%MainLayout.css 中的第 29 行。

IE 9 具有其他浏览器可以正确处理的高度怪癖。

于 2013-04-26T18:40:38.987 回答
0

如果您使用 Internet Explorer 开发人员工具(CSS 选项卡)禁用 height:100%,则页面布局将按预期工作。

因此,您应该从 MainLayout.css 中删除将 body height 设置为 100% 的 css 规则。

Veel成功ermee!

于 2013-04-26T18:45:35.173 回答