Question

我真的很难过。这个小提琴手Test Style（如下所示，因为堆栈溢出不会让我只是链接到小提琴手而不自己发布代码），这就像我在小提琴手中寻找的方式。但是，使用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;
        }

Answer 1

在你的项目中你可能没有的那个小提琴中有两个突出的东西：首先是DOCTYPE。您在页面上列出的DOCTYPE与小提琴上实际加载的DOCTYPE不同，即HTML5 DOCTYPE，<!DOCTYPE html>，因此请将当前的DOCTYPE切换到该文件。反正它好多了。其次是使用normalize.css工作表，它会重置页面上的元素，因此请确保您的项目中也包含该元素。

修改

另一个问题是，您的脚本未加载到<head>标记内。

jsFiddle用Visual Studio代码显示了一件事

1 个答案: