0

因此，我最近发布了我的数字作品集（asp c# web 应用程序），并意识到母版页在我网站的“作品集”页面上无法正常工作，并且只有在 IE 中查看时才能正常工作。Chrome、firefox 和 safari 以及 IE 中的所有其他页面都可以正常工作。

不知道为什么它不起作用，我检查了语法但找不到原因。有人有什么想法吗？

投资组合.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>
4

1 回答 1

1

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

当您从 ID 为“background”的 div 元素中删除“width: 2200px”时，Internet Explorer 8 中的特定问题消失了，我看不出这个宽度是必需的，但我也鼓励您查看验证问题（请参阅HTML 验证结果和CSS 验证结果）同时修复问题。

我还建议您用更多语义超链接替换导航菜单中的输入按钮 - 这些将更易于访问并解决页面 URL 直到单击导航菜单按钮后第二次回发才更新的问题（为什么会这样正在发生，查看页面生命周期和事件处理，事件在 C# 代码中触发的顺序）。

于 2013-01-15T23:25:41.607 回答