0

我真的很难过。这种提琴手测试样式（如下所示，因为堆栈溢出不会让我在不自己发布代码的情况下链接到提琴手）按照我在提琴手中寻找的方式工作。然而，在 Visual Web Developer 2010 Express 中使用完全相同的代码，主菜单部分是正确的，但播放器选择部分（下拉和 3 个按钮）没有灰色背景或一些微妙的居中格式。可能有什么区别？

即使我从 VS 启动不同的浏览器也会发生这种情况。谁能将 jsFiddler 代码插入 VS Web Developer 2010 Express 的网页中，看看他们是否看到播放器选择部分中的 BG 不是灰色的？

HTML：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/LocalStorageDB.js"></script>
    <script type="text/javascript" src="Scripts/Main.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>My Golf Score</title>
    <link rel="stylesheet" type="text/css" href="Style/normalize.css" />
    <link rel="stylesheet" type="text/css" href="Style/Main.css" />
</head>
<body>
    <div id="divMainMenu">
        <input id="btnNewRound" type="button" value="New Round" onclick="return btnNewRound_onclick()" />
        <input id="btnCurrentRound" type="button" value="Current Round" onclick="return btnCurrentRound_onclick()" />
        <input id="btnRoundHistory" type="button" value="Round History" onclick="return btnRoundHistory_onclick()" />
        <input id="btnReports" type="button" value="Reports" onclick="return btnReports_onclick()" />
    </div>
    <div id="divPlayerSelect">
        <div id="divPlayerSelectName">
            Player:
            <select id="lstPlayer">
                <option></option>
            </select>
        </div>
        <div id="divPlayerSelectButtons">
            <input id="btnNewPlayer" type="button" value="New Player" onclick="return btnNewPlayer_onclick()" />
            <input id="btnBackPlayer" type="button" value="Back" onclick="return btnBackPlayer_onclick()" />
            <input id="btnDonePlayer" type="button" value="Done" onclick="return btnDonePlayer_onclick()" />
        </div>
    </div>
</body>
</html>

CSS：

html, body 
        {
            text-align: center;
            min-height: 100%;
            position: relative;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        td,th 
        {
         text-align: center;
        }
        #divMainMenu
        {
            margin: auto;
            height: 100%;
            width: 100%;
            display: block;
            background-color: Gray;
            border: 1px solid red
        }
        #divMainMenu input[type="button"]
        {
            display: block;
            width: 70%;
            margin: auto;
            height: 14%;
            margin-bottom: 2.5%;
            padding: 0;
            margin-top: 2.5%;
            font-size: 400%;
        }
        /* START: Player select window*/
        #divPlayerSelect
        {
            border: 10px solid blue;
            background-color: Gray;
            width: 100%;
            height: 100%;
            font-size: 150%;
        }
        #divPlayerSelectName
        {
            border: 1px solid yellow;
            width: 100%;
            font-size: 200%;
            padding-bottom: 5%;
        }
        #divPlayerSelectName select
        {
            width: 50%;
            height: 200%;
            font-size: 85%;
        }
        #divPlayerSelectButtons
        {
            border: 1px solid green;
            height: 100%;
            width: 100%;
        }
        #divPlayerSelectButtons input
        {
            width: 25%;
            height: 15%;
            font-size: 200%;
            margin: 5px;
        }​
4

1 回答 1

0

从那个小提琴中脱颖而出的两件事可能是您的项目中没有的：第一，DOCTYPE。您在页面上列出的 DOCTYPE 与小提琴上实际加载的 DOCTYPE 不同，后者是 HTML5 DOCTYPE <!DOCTYPE html>，因此请将您当前的 DOCTYPE 切换为那个。反正它好多了。其次是使用工作normalize.css表，它会重置页面上的元素，因此请确保您的项目中也包含该工作表。

编辑

另一个问题，您的脚本没有在<head>标签中加载。

于 2012-12-03T00:54:41.840 回答