Question

我的网站在.aspx页面显示不同的输出，同时使用相同的结构和在html页面中的CSS显示正确的输出但在apsx页面中css会崩溃。我检查了两次代码和两次它是相同的，但输出变得不同。

HTML页面输出

ASPX页面输出

HTML代码

<!--bg-img-container-starts--><div class="bg-img-container">
        <!--bg-img-starts--><div class="bg-img">
            <!--header-starts--><div class="header">
                <!--logo-starts--><div class="logo">
                    <h2><a title="Quista" href="#">Quista</a></h2>
                </div><!--logo-ends-->

                <!--menus-starts--><div class="menus">
                    <ul class="nav">
                    <li><a href="#">Home</a> <div class="pipe"></div></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Track Orders</a></li>
                    <li><a href="#">About Quista</a></li>
                    <li class="call"><a href="#">Call Us :- +91 1234 1245</a></li>
                    </ul>
                </div><!--menus-ends-->
            </div><!--header-ends-->
        </div><!--bg-img-ends-->

CSS

html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%
}

.clear{clear:both}

body{
    font-family:'Quicksand', sans-serif;
}

.bg-img-container{
    width:100%;
    position:relative;
    height:100%
}

.bg-img{
    width:100%;
    max-height:768px;
    height:100%;
    background:url(../Images/0000.jpg) no-repeat;
    background-size:cover;
}

.header{
    width:100%;
    max-width:1200px;
    position:relative;
    margin:0 auto;
    padding:15px 0 0 0
}

.logo{
    width:20%;
    display:inline-block;
}

.logo h2{
    font-family:'MyriadPro-BoldCondIt';
    font-size:4em;
    padding:0;
    margin:0;
    letter-spacing: 5px
}

.logo a{
    color:#fff;
    text-decoration:none
}

.menus{
    width:79%;
    display:inline-block;
}

.nav{
    marging:0;
    padding:0
}

.nav li{
    display:inline-block;
    list-style:none:none;
}

.nav li a {
    padding:15px 25px 15px 25px;
    color:#fff;
    text-decoration:none;
    display:block
}

.nav li a:hover{
    border-bottom:2px solid #FFF
}

.call{
    background:#df6b5e;
    border-radius:50px
}

.call a{
    font-weight:bold;
    padding:15px 25px 15px 25px !important
}

.call a:hover{
    border:none !important
}

我认为问题在于顶级div（img-bg-container），因为在CSS中我给出了高度100％＆amp;它的孩子div max：身高：768px。虽然问题解决了如果我在aspx页面中保持最小高度而不是最大高度，但是当代码相同时它会显示出不同的输出..

Answer 1

做一件事。右键单击页面，然后选择inspect元素。并检查页面html和CSS。很容易比较并找出哪个css不起作用。

同时检查表单标记css，因为我们将表单标记放在asp.net的所有HTML标记和body标记内。通常HTML页面没有这样的结构。检查并告诉我。

html＆amp;中的CSS结构变化aspx页面

1 个答案: