无法在 ASP.NET 自定义 Web 控件的类上使用 css 伪 :before

发布于 2024-12-27 04:30:13 字数 1742 浏览 0 评论 0原文

我的自定义 Web 控件的样式有问题。我正在尝试创建一个精美的按钮控件以在我未来的项目中使用。

我首先创建一些 HTML 文件，其中包含以下 html。 Home

和 css：

.button:before{
...
}

这个文件工作得很好，css 使用正确，并且感谢 :before 伪在我的 css 文件中我有一个我的按钮周围有一个漂亮的额外盒子。

现在我确信该样式有效，我想在 ASP.Net 中创建一个 Web 控件所以我创建了一个，这是一些代码示例。

protected override void RenderContents(HtmlTextWriter output)
    {
        output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);
        output.AddAttribute(HtmlTextWriterAttribute.Class, String.IsNullOrEmpty(this.CssClass) ? "button" : this.CssClass);          

        if (this.Style.Count>0)
            output.AddAttribute(HtmlTextWriterAttribute.Style, this.Style.ToString());
        if(this.Width != default(Unit))
            output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());
        if (this.Height != default(Unit))
        output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

        output.RenderBeginTag("a");
        if (!String.IsNullOrEmpty(ImageSrc))
        {
            output.AddAttribute(HtmlTextWriterAttribute.Style, String.Format("background: url('{0}') no-repeat {1}px {2}px;",ImageSrc,ImageXPos, ImageYPos));
            output.RenderBeginTag("div");
            output.RenderEndTag();
        }
        output.Write(Text);
        output.RenderEndTag();
    }

生成的 html 与我的测试文件中的相同。但由于某种原因， :before css 未应用。有人能帮我解决这个问题吗？

我的测试文件是纯 html，但是当我将纯 html 代码放入我的 asp.net 站点时，它也没有应用 :before 样式

这是一个小 Fiddle 示例，您在其中看不到错误因为它不是 ASP.net 示例

已解决：看来问题出在 z-index 上。 atm 它是-2，这意味着它显示在页面所有其他内容的后面。我的坏

原文

I've got a problem with the style of my custom web control.
I am trying to create a fancy button control to use in my future projects.

I started by creating some HTML-file where i have the folowing html.
<a class="button">Home</a>

And the css:

.button:before{
...
}

This file works great, the css is used properly and thanks to the :before pseudo in my css file I have a nice extra box around my button.

Now that I was sure that the style worked i wanted to create a web control in ASP.Net
So I created one, here is some code-sample.

protected override void RenderContents(HtmlTextWriter output)
    {
        output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);
        output.AddAttribute(HtmlTextWriterAttribute.Class, String.IsNullOrEmpty(this.CssClass) ? "button" : this.CssClass);          

        if (this.Style.Count>0)
            output.AddAttribute(HtmlTextWriterAttribute.Style, this.Style.ToString());
        if(this.Width != default(Unit))
            output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());
        if (this.Height != default(Unit))
        output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

        output.RenderBeginTag("a");
        if (!String.IsNullOrEmpty(ImageSrc))
        {
            output.AddAttribute(HtmlTextWriterAttribute.Style, String.Format("background: url('{0}') no-repeat {1}px {2}px;",ImageSrc,ImageXPos, ImageYPos));
            output.RenderBeginTag("div");
            output.RenderEndTag();
        }
        output.Write(Text);
        output.RenderEndTag();
    }

The html generated is the same as in my test file. but for some reason the :before css isn't applied. Can anybody help me solving this problem?

My testfile was pure html but when i put the pure html code into my asp.net site it also doesn't apply the :before style

This is a small Fiddle example where you can't see the error because it ain't ASP.net
example

SOLVED:
Seems like the problem is with the z-index.
atm it is -2 which means it is displayed behind all the other content of the page.
My bad

分享到QQ

分享到微博