Question

我遇到了这个问题，我正在尝试集成的主题有一个CSS通配符选择器，应用于整个站点。问题是它打破了我以前的表单元素。

请参阅此图片以获取问题的参考：坏： http://i.imgur.com/mKKrbpD.png

这就是我想要的样子：好： http://i.imgur.com/sj4sBtN.png

为了获得良好的外观，我将'box-sizing'更改为content-box。问题是通配符不断被应用到整个页面，所以它取代它，我相信。

问题＃1：有人可以告诉我如何只在一页上将这个内容框应用于这两个方框吗？

问题＃2：第1点的类型 - 但这必须仅适用于那两个框作为标题，并且网站的其余部分都依赖于框大小：border-box

这是一个实际的例子：失败问题部分，我认为......

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

请详细了解实例，让我知道应该更改什么来解决此问题。你可以看到我在那里尝试过的所有东西，但没有一个已经有效。如果你能帮助解决这个问题，你将会得到我永恒的感激和我的战刃。

Answer 1

查看课程.CollapsiblePanelTab，其中背景img width为660px，并且您已定义width:647px。确保宽度与背景图像宽度相等。

以下是CSS代码

.CollapsiblePanelTab {
    font: normal 21px Arial;
    text-transform:uppercase;
    background-color: #fff;
    border-bottom: solid 0px #CCC;
    height: 40px;
    margin: 10px 0 0;
    padding-left: 10px;
    padding-top: 13px;
    width: 660px; /*change it from 647 to 660px*/
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url("http://i.imgur.com/6wGRmmk.png");
    background-repeat: no-repeat;
    color: #000000;
}

旁注：您使用的-khtml-user-select: none;用于非常旧的版本。要定位最新版本的chrome和safari，您必须使用-webkit前缀。阅读 MDN 。

Answer 2

<style type="text/css">
        .pnl_1
        {
            width :60%;
            height :50px;
             border : 1px solid blue;
             border-radius :5px;
         }
</style>
    <form id="form1" runat="server">
    <asp:Panel ID="pnl_id" runat="server" CssClass ="pnl_1" >
    </asp:Panel>
    </form>

覆盖CSS通配符一半的页面

2 个答案: