Question

我设置了一些css规则和html标签，这在设计视图中看起来很合适。但是当母版页的子页面加载页面时，它看起来不同。子css规则可以控制父css规则的属性。

style type="text/css">
#container{position:relative;}
img#border{position:absolute; 

}
#placeH{position:absolute; left:344px;
    top: 325px;
    height: 168px;
    width: 708px;
    bottom:287px;
}

<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

<div align="center" id="container">
    <asp:Image ID="Header" runat="server" ImageUrl="~/header.png" Width="1196px" 
        Height="280px" />


  </div>
      <div id="border">

            <asp:Image ID="Image1" runat="server" ImageUrl="~/border.png"/>// the border

我尝试设置此处在主页设计视图中显示正常..但在孩子们身上设计视图，它出现在页面的左下角

              </div>

                  <div id="placeH">
                         <form id="form1" runat="server">
                        <asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">

                           </asp:ContentPlaceHolder>
                    </form>

                  </div>
           </body>

Answer 1

我认为您应该将placeH的样式更改为此内容。

#placeH{
    position:absolute; 
    left:344px;
    top: 325px;
    height: 168px;
    width: 708px;
}

^^

是的，母版页的css适用于子页面。

Answer 2

我能从这里看到的唯一一件事是。你有一些CSS可能没有你想象的那样。

img#border{position:absolute;}

这将适用于id为“border”的<img/>代码。在上面的HTML中，你有一个带有id =“border的div里面的img。你的CSS看起来应该是这样的。

div#border > img { postition:absolute; }  if you want it applied to the image only.

或

#border { position:absolute; } if you want it applied to the whole div.

实际上很难在上面的HTML中看到这些片段。如果上述方法无法解决问题，请将整个内容粘贴给我。

masterpages和css

2 个答案: