私は本当にここで困惑しています。このフィドラーテスト スタイル(スタック オーバーフローにより、自分でコードを投稿せずにフィドラーにリンクすることはできないため、以下に示します) は、私がフィドラーで探している方法で機能します。ただし、Visual Web Developer 2010 Express のこのまったく同じコードでは、メイン メニュー部分は正しいのですが、プレーヤーの選択部分 (ドロップダウンと 3 つのボタン) には灰色の背景や微妙なセンタリング形式がありません。違いは何でしょうか？
これは、VS から別のブラウザーを起動しても発生します。その jsFiddler コードを VS Web Developer 2010 Express の Web ページにプラグインして、プレーヤーの選択部分で 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;
}