Question

所以我最近提出了我的数字产品组合（asp c＃web应用程序）并意识到母版页在我的网站的“投资组合”页面上无法正常工作，并且只有在IE中查看时才能正常工作。 Chrome，firefox和safari以及IE中的其他每个页面都可以正常运行。

不确定为什么它不起作用，我检查语法并找不到原因。有没有人有任何想法？

Portfolio.aspx

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeBehind="Portfolio.aspx.cs" Inherits="PortfolioApplication.Portfolio" %>

<asp:Content runat="server" ID="HeaderContent" ContentPlaceHolderID="HeadContent" >
    <link rel="Stylesheet" href="Styles/portfolioLayout.css" type="text/css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/js-image-slider.js"></script>
    <script type="text/javascript" src="Scripts/popup.js"></script>

    <script type="text/javascript">
        function populateSlider(sliderNum) {
            //Note: If the slider container has been set as invisible(e.g. display:none;), make sure set it visible before reload the imageSlider
            setSliderMarkup(sliderNum);
            imageSlider.reload();
        }
        function setSliderMarkup(sliderNum) {
            var sliderFrame = document.getElementById("popUp");

            switch (sliderNum) {
                case 1:
                    sliderFrame.innerHTML = '<div id="slider">' +
                        '<img src="Pictures/Projects/VacationWidget/vacationSlider1.jpg" width="989px" height="691" />' +
                        '<img src="Pictures/Projects/VacationWidget/vacationSlider2.jpg" width="989px" height="691" />' +
                        '</div>';
                    break;
                case 2:
                    sliderFrame.innerHTML = '<div id="slider"><img src="Pictures/Projects/FlashPortfolio/portfolioSlider1.jpg" />' +
                        '<img src="Pictures/Projects/FlashPortfolio/portfolioSlider2.jpg" />' +
                        '<img src="Pictures/Projects/FlashPortfolio/portfolioSlider3.jpg" />' +
                        '<img src="Pictures/Projects/FlashPortfolio/portfolioSlider4.jpg" />' +
                        '</div>';
                    break;
                case 3:
                    sliderFrame.innerHTML = '<div id="slider"><img src="Pictures/Projects/A1Auto/upholsterySlider1.jpg" />' +
                        '<img src="Pictures/Projects/A1Auto/upholsterySlider2.jpg" />' +
                        '<img src="Pictures/Projects/A1Auto/upholsterySlider3.jpg" />' +
                        '<img src="Pictures/Projects/A1Auto/upholsterySlider4.jpg" />' +
                        '</div>';
                    break;
                case 4:
                    sliderFrame.innerHTML = '<div id="slider"><img src="Pictures/Projects/Renatus/renatusSlider1.jpg" />' +
                        '<img src="Pictures/Projects/Renatus/renatusSlider2.jpg" />' +
                        '<img src="Pictures/Projects/Renatus/renatusSlider3.jpg" />' +
                            '</div>';
                    break;
                default:
            }
        }
    </script>
</asp:Content>

<asp:Content runat="server" ID="MainContent" ContentPlaceHolderID="MainContent">
    <div class ="content">
        <h1>My Recent Projects!</h1>
        <div id="project1" class="project">
            <asp:ImageButton runat="server" ImageUrl="Pictures/Projects/VacationWidget/VacationWidget.png" CssClass="projectImage" OnClientClick="populateSlider(1); return false" />
            <div id="project1Content" class="projectContent">
                <h1>Vacation Widget</h1>
                <p>Posted on: Saturday, October 28th, 2012</p>
                <h2>Description</h2>
                <p>This vacation widget... </p>
            </div>
        </div>                
        <div id="project2" class="projectOther">
            <asp:ImageButton runat="server" ImageUrl="Pictures/Projects/FlashPortfolio/FlashPortfolio1.png" CssClass="projectImage" OnClientClick="populateSlider(2); return false" />
            <div id="Div2" class="projectContent">
                <h1>Flash Portfolio</h1>
                <p>Posted on: Saturday, October 28th, 2012</p>
                <h2>Description</h2>
                <p>This project was designed...</p>
            </div>
        </div>
        <div id="project3" class="project">
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="Pictures/Projects/A1Auto/Upholstry.png" CssClass="projectImage" OnClientClick="populateSlider(3); return false" />
            <div id="Div3" class="projectContent">
                <h1>A1-Auto Upholstery</h1>
                <p>Posted on: Saturday, October 28th, 2012</p>
                <h2>Description</h2>
                <p>Recently modified with a few JavaScript touch ups...</p>
            </div>
        </div>
        <div id="project4" class="projectOther">
            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="Pictures/Projects/Renatus/bestTravel.jpg" CssClass="projectImage" OnClientClick="populateSlider(4); return false" />
            <div id="Div4" class="projectContent">
                <h1>Renatus Travel Desktop Application</h1>
                <p>Posted on: Saturday, October 28th, 2012</p>
                <h2>Description</h2>
                <p>Best Travel is a fictional company...</p>
            </div>
        </div>
        <div class="imageViewerPopup" id="popUp" style="color:blue; width:691px" /> 
    </div>
    <div id="fade"></div>
</asp:Content>

Answer 1

您的投资组合页面上有多个HTML和CSS验证错误。

当您从ID为“background”的div元素中删除“width：2200px”时，Internet Explorer 8中的特定问题消失了，我看不到需要此宽度，但我也鼓励您在解决问题的同时查看验证问题（请参阅HTML validation results和CSS validation results）。

我还建议您使用更多语义HyperLinks替换导航菜单中的输入按钮 - 这些更易于访问，并解决在点击导航菜单按钮后第二次回发之前页面URL未更新的问题（为什么会发生这种情况，请查看页面生命周期和事件处理，以及C＃代码中事件触发的顺序。

母版页不在单页上工作，只在IE中工作

1 个答案: