在 Chrome、Firefox 中编码的 ASP.NET 4.0 下拉列表文本

Question

我有一个 asp.net 网站，它是用 Visual Studio Pro 2010 开发的，后端是 Windows Server 2008 R2，SQL Server 2008 R2 和 II7，Framework 是 4.0

我的下拉列表仅在 IE 上运行良好，但在 chrome 和 firefox 上运行不佳。这些元素显示有奇怪的字符，我猜输出是经过编码的，所以我只是实现了一个代码来解决这个问题，但似乎我做错了什么。请看下面的代码。

我还尝试使用旧配置以防万一导致问题，所以我决定将以下行放在我的 web.config 文件中。

网络配置

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>

ASP.NET HTML 标签

<asp:DropDownList ID="JobCategoryList" runat="server"  OnDataBound="SortHTML">
    </asp:DropDownList>

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        {
            DisplayCategories();
        }  
}

private void DisplayCategories()
    {
        _objCategories.getJobCategories();
        JobCategoryList.DataSource =         _objCategories.JobCategoriesDS.Tables["GetJobCategories"];
        JobCategoryList.DataTextField = "CategoryName";
        JobCategoryList.DataValueField = "Id";
        JobCategoryList.DataBind();
    }

protected void SortHTML(object sender, EventArgs e)
    {
        foreach (ListItem item in ((DropDownList)sender).Items)
        {
            item.Text = Server.HtmlDecode(item.Text);
        }
    }

Answer 1

这是一个 CSS 问题。在 /css/normalize.css 中找到这一行，然后删除字体系列，从列表中选择。

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */ <--------- remove it
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

同时从 base.css 中删除此行中的连线字体

/* Form defaults */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select { 
    border: 1px solid #ccc;
    padding: 6px 4px;
    outline: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-family: 'MuseoSans500Regular', Arial, sans-serif; <-------- remove it
    color: #777;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    background: #fff;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    }

您在下拉列表中放置了这个 MuseoSans500Regular 字体名称，这是字体的有线错误设计。

您可以更改字体系列，也可以从此 css 行中删除 select，这取决于您，但这就是问题所在。