Question

只需将边框设置为红色，borderwidth = 1px即可。使用F12查看器我可以看到CSS已应用，它应该渲染所有四个边框，但只有底部和右边框是可见的。将边框更改为2px使其可见。

如何修复它，以便今天的日期有一个边界？

代码是内联的，因为日历控件失败并且没有正确地应用CSS一半的时间：

<asp:Calendar runat="server" ID="calendarBooking" BorderStyle="None" 
        BackColor="White" OnLoad="Calendar_Load"
        ondayrender="calendarBooking_DayRender">
    <DayHeaderStyle BackColor="#98c4eb" ForeColor="#ffffff"
    Width="30px" Height="30px"
    BorderStyle="None"
    />

    <DayStyle BackColor="#ffffff"
    ForeColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    BorderColor="#cccccc"
    Width="30px"
    Height="30px"


    />

    <TitleStyle BorderStyle="None" BackColor="#ffffff" />

    <NextPrevStyle BorderStyle="None" />

    <TodayDayStyle BorderColor="Red"/>

    <SelectedDayStyle BackColor="#FF6A00"/>

    </asp:Calendar>

Answer 1

问题来自.NET的表输出 - 它包含这个样式定义：

border-collapse:collapse;

通过禁用此规则（使用带Firebug的Firefox），边框正确显示“今天” - 当然，这意味着每个单元格都有一个边框，因此您有两个1px边框彼此相邻，这使得所有单元格似乎有2px边框，这可能不是你想要的。

另一种可能的解决方案是调整锚点 - 就像这样：

<TodayDayStyle CssClass="today"/>

使用此css规则：

td.today a
       {
        border: 1px solid Red;
        display: block;
        width: auto;
        height: 24px;
        padding: 4px 0 0 0;
       }

同样，这并不完美，因为红色边框出现在现有的灰色边框内。

另一种解决方案是使用突出显示的背景......

<TodayDayStyle BackColor="Red" ForeColor="White"/>

你在尝试解决这个问题时遇到的问题是你无法控制为日历生成的HTML - 它是由日历控件神奇地发明的 - 所以所有正确的修复你通常用HTML和CSS做的不一定可用。我希望其中一条建议有所帮助。

更新：如果您想将红色边框放在灰色边框旁边，没有间隙，可以按如下方式更改css规则：

td.today 
{
     padding: 0;
}

td.today a
{
    border: 1px solid Red;
    display: block;
    width: auto;
    height: 24px;
    padding: 3px 0 0px 0;
}

Asp日历，试图将今天的日期设置为红色边框，但只能看到底部/右边框？

1 个答案: