我在两个 div 标签上有一个带有 box-shadow 样式的标题。和一个标题 div 标签。 我用 Notepad++ 写的，效果很好。但是当我想在我的 asp.net 页面中使用它时，它不显示阴影，而且它的填充和显示的元素高度不同。 我尝试在 Firefox 和 IE 中打开并且 html 文件工作正常但 asp 文件具有不同的 .CSS 但我对两者使用相同的 .CSS 文件... 任何人都知道为什么会这样？
这里是代码:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> طراحی وبسایت</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<script src="respond.min.js"></script>
<script type="text/javascript">
function ShowMenuMobile(){
if( document.getElementById("Menu").style.display=="none")
document.getElementById("Menu").style.display="block";
else
document.getElementById("Menu").style.display="none";
}
</script>
</head>
<body >
<div class="gridContainer">
<div id="Header">
<table id="headerTable" >
<tr>
<td id="SocialLink" >
<a href="#"><img src="img/instaHover.png" /></a>
<a href="#"><img src="img/Telegram.png" /></a>
<a href="#"><img src="img/facebook.png" /></a>
</td>
<td id="Contact"><a id="EmailLink" href="#">info@mangochip.com</a></td>
<td id="temp" > </td>
<td id="SignUp" ><a href="#">ثبت نام</a></td>
<td id="Login" ><a href="#">ورود</a></td>
</tr>
</table>
</div>
<div id="btnMenu" >
<button id="btnDrop" onclick="ShowMenuMobile()" >
<div class="btnMobile"></div>
<div class="btnMobile"></div>
<div class="btnMobile"></div>
</button>
</div>
<div id="Menu">
<ul>
<li><a href="#">صفحه نخست</a></li>
<li><a href="#">طراحی وبسایت</a></li>
<li><a href="#">نمونه کارها</a></li>
<li><a href="#">طراحی نرم افزار</a></li>
<li><a href="#">پروژه های آزاد</a></li>
<li><a href="#">مقالات</a></li>
<li><a href="#">راهنمای سفارش</a></li>
<li><a href="#">درباره ما</a></li>
</ul>
</div>
<div id="Logo"><img src="img/logo1.png"/></div>
</div>
css文件是:
body{
margin:0;
padding:0;
background-repeat:no-repeat;
direction:rtl;
}
a{
text-decoration:none;
}
.gridContainer {
width: 100%;
margin:0;
padding:0;
box-shadow: 10px 10px 5px #1f2348;
}
#Header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
direction:rtl;
background-color:#1f2348;
/*padding:11px;*/
padding-top:5px;
padding-bottom:5px;
}
#Menu {
font-family:menu;
font-size:24px;
clear: both;
float: left;
margin-left: 0;
width: 83.0508%;
display: block;
text-align:center;
padding-top:35px;
}
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
float:right;
}
li a {
display: block;
color: #1f2348;
text-align: center;
padding: 10px;
text-decoration: none;
border:3px solid transparent;
}
li a:hover {
/* background-color: #b0d24c;*/
display:block;
border-radius:10px;
border:3px solid #fcb037;
color:#1f2348;
margin-top:5px;
}
#Logo {
clear: none;
float: left;
margin-left: 1.6949%;
width: 15.2542%;
display: block;
}
#headerTable{
font-family:header;
font-size:20px;
font-weight:bold;
width:100%;
color:#fcb037;
padding:12px;
}
#Login {
text-align:right;
padding-right:2ex;
}
#Login a{
color:#fcb037;
}
#Login a:hover{
color:#facb29;
}
#SignUp{
border-left:1px solid;
text-align:left;
padding-left:2ex;
}
#SignUp a{
color:#fcb037;
}
#SignUp a:hover{
color:#facb29;
}
#Contact {
font-family:email;
text-align:right;
padding-left:0.5ex;
padding-right:2ex;
font-family:email;
font-size:18px;
}
#Contact a{
color:#fcb037;
}
#Contact a:hover{
color:#facb29;
}
#SocialLink {
border-left:1px solid;
text-align:center;
padding-left:0.5ex;
}
#SocialLink a{
color:#fcb037;
}
最佳答案
尝试在浏览器中“硬刷新”页面。不是 F5，而是 Ctrl+F5，因此您拥有最新的 css。我在 firefox 中试过，这里似乎也可以。 (是的，您的问题有点令人困惑。)
关于html - css 在 asp.net 中的工作方式不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44122569/