gpt4 book ai didi

css - jsFiddler 用代码和 Visual Studio 展示了一件事

转载 作者:行者123 更新时间:2023-11-28 13:29:59 25 4
gpt4 key购买 nike

我真的被难住了。这个 fiddler Test Style (如下所示,因为堆栈溢出不允许我在不自己发布代码的情况下直接链接到 fiddler )按照我在 fiddler 中寻找的方式工作。然而,在 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;
}​

最佳答案

从您的元素中可能没有的 fiddle 中脱颖而出的两件事:首先,DOCTYPE。您在页面上列出的 DOCTYPE 与 fiddle 上实际加载的 DOCTYPE 不同,后者是 HTML5 DOCTYPE,<!DOCTYPE html> ,因此将您当前的 DOCTYPE 切换为该 DOCTYPE。反正它好多了。其次是使用 normalize.css sheet,它会重置页面上的元素,因此请确保您的元素中也包含了它。

编辑

另一个问题,您的脚本未在 <head> 中加载标签。

关于css - jsFiddler 用代码和 Visual Studio 展示了一件事,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13675634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com