Question

我在ASP.NET 4.5网站上发生了一个非常奇怪的问题，使用bootstrap进行样式化。我已将控件的类设置为form-control-static以进行对齐。但是，我在3个浏览器中获得了不同的显示结果。

IE9，我们的一些用户使用，控件在聚焦或鼠标悬停时发光。这很好。

Chrome，文本框边框在聚焦时会变为蓝色（但没有发光）。鼠标悬停没有任何反应（对我很好）。

IE11，这是该应用程序的主要使用浏览器，控件不会发光或改变焦点上的边框颜色。但是，如果我单击每个文本框然后选项卡到下一个文本框，则边框将变为蓝色仅标签到下一个字段。即使我浏览不同的字段，控件也会保持蓝色边界（请参见下面的屏幕截图）。

如果我使用form-control（非静态），我会得到漂亮的圆形控件，焦点上有蓝色光晕。但布局不是我想要的。

 <div class="form-group">
                        <asp:Label ID="lblReduction" runat="server" Font-Bold="True" Text="Reduction:" Width="320px"></asp:Label>
                        <asp:DropDownList ID="ddlReduction" runat="server" AutoPostBack="True" CssClass="form-control-static" OnSelectedIndexChanged="ddlReduction_SelectedIndexChanged" Width="220px">
                            <asp:ListItem>&lt;-- Please Select --&gt;</asp:ListItem>
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem>No</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="lblDLACareComponentAward" runat="server" CssClass="form-control-static" Font-Bold="True" Text="DLA Care Component Payment Awarded (£):" Width="320px"></asp:Label>
                        <asp:TextBox ID="DLACareComponentAwardTextBox" runat="server" CssClass="form-control-static" MaxLength="8" Text='<%# Bind("DLACareComponentAward") %>' Width="220px" />
                        <asp:RequiredFieldValidator ID="reqvalDLACareAwarded" runat="server" ControlToValidate="DLACareComponentAwardTextBox" Display="Dynamic" Enabled="False" ErrorMessage="DLA Care Component Payment Required" font-bold="true" ForeColor="Red" SetFocusOnError="True">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="regexDLApaymentAwarded" runat="server" ControlToValidate="DLACareComponentAwardTextBox" Display="Dynamic" ErrorMessage="DLA Care Component Payment Awarded must be a money value" font-bold="true" ForeColor="Red" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="lblDLAMobilityComponentAward" runat="server" Font-Bold="True" Text="DLA Mobility Component Payment Awarded (£):" Width="320px"></asp:Label>
                        <asp:TextBox ID="DLAMobilityComponentAwardTextBox" runat="server" CssClass="form-control-static" MaxLength="8" Text='<%# Bind("DLAMobilityComponentAward") %>' Width="220px" />
                        <asp:RequiredFieldValidator ID="reqvalMobilityComponent" runat="server" ControlToValidate="DLAMobilityComponentAwardTextBox" Display="Dynamic" Enabled="False" ErrorMessage="DLA Mobility Component Payment" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="regexDLApaymentAwarded0" runat="server" ControlToValidate="DLAMobilityComponentAwardTextBox" Display="Dynamic" ErrorMessage="DLA Mobility Component Payment Awarded must be a money value" font-bold="true" ForeColor="Red" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="lblDailyPIPPoints" runat="server" Font-Bold="True" Text="Daily PIP Points:" Width="320px"></asp:Label>
                        <asp:TextBox ID="DailyPIPPointsTextBox" runat="server" CssClass="form-control-static" MaxLength="10" Text='<%# Bind("DailyPIPPoints") %>' Width="220px" />
                        <asp:RequiredFieldValidator ID="reqvalDailyPIPPoints" runat="server" ControlToValidate="DailyPIPPointsTextBox" Display="Dynamic" Enabled="False" ErrorMessage="Daily PIP Points" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="regexDailyPIP" runat="server" ControlToValidate="DailyPIPPointsTextBox" Display="Dynamic" ErrorMessage="Only numbers can be used for Daily PIP Points" font-bold="true" ForeColor="Red" ValidationExpression="^[0-9]*$" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="lblMobilityPIPPoints" runat="server" Font-Bold="True" Text="Mobility PIP Points:" Width="320px"></asp:Label>
                        <asp:TextBox ID="MobililtyPIPPointsTextBox" runat="server" CssClass="form-control-static" MaxLength="10" Text='<%# Bind("MobililtyPIPPoints") %>' Width="220px" />
                        <asp:RequiredFieldValidator ID="reqvalMobilityPIPPoints" runat="server" ControlToValidate="MobililtyPIPPointsTextBox" Display="Dynamic" Enabled="False" ErrorMessage="Mobility PIP Points" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="regexMobilityPIPPoints" runat="server" ControlToValidate="MobililtyPIPPointsTextBox" Display="Dynamic" ErrorMessage="Only numbers can be used for Mobility PIP Points" font-bold="true" ForeColor="Red" ValidationExpression="^[0-9]*$" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                    </div>
                    <asp:Panel ID="pnlPIP" runat="server" Visible="false">
                        <div class="form-group">
                            <asp:Label ID="lblPIPDailyLivingAward" runat="server" Font-Bold="True" Text="PIP Daily Living Award (£):" Width="320px"></asp:Label>
                            <asp:TextBox ID="PIPDailyLivingAwardTextBox" runat="server" CssClass="form-control-static" MaxLength="8" Text='<%# Bind("PIPDailyLivingAward") %>' Width="220px" />
                            <asp:RequiredFieldValidator ID="reqvalDailyLivingAward" runat="server" ControlToValidate="PIPDailyLivingAwardTextBox" Display="Dynamic" Enabled="False" ErrorMessage="PIP Daily Living Award Required" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="regexDLApaymentAwarded1" runat="server" ControlToValidate="PIPDailyLivingAwardTextBox" Display="Dynamic" ErrorMessage="PIP Daily Living Awarded must be a money value" font-bold="true" ForeColor="Red" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                        </div>
                        <div class="form-group">
                            <asp:Label ID="lblPIPMobilityAward" runat="server" Font-Bold="True" Text="PIP Mobility Award (£):" Width="320px"></asp:Label>
                            <asp:TextBox ID="PIPMobilityAwardTextBox" runat="server" CssClass="form-control-static" MaxLength="8" Text='<%# Bind("PIPMobilityAward") %>' Width="220px" />
                            <asp:RequiredFieldValidator ID="reqvalmobilityAward" runat="server" ControlToValidate="PIPMobilityAwardTextBox" Display="Dynamic" Enabled="False" ErrorMessage="PIP mobility Award Required" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="regexDLApaymentAwarded2" runat="server" ControlToValidate="PIPMobilityAwardTextBox" Display="Dynamic" ErrorMessage="PIP Mobility Award must be a money value" font-bold="true" ForeColor="Red" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                        </div>
                    </asp:Panel>
                    <asp:Panel ID="pnlAppealLodged" runat="server" Visible="false">
                        <div class="form-group">
                            <asp:Label ID="lblAppealLodged" runat="server" Font-Bold="True" Text="Appeal Lodged:" Width="320px"></asp:Label>
                            <asp:DropDownList ID="ddlAppealLodged" runat="server" AutoPostBack="True" CssClass="form-control-static" OnSelectedIndexChanged="ddlAppealLodged_SelectedIndexChanged" Width="220px">
                                <asp:ListItem Value="0">&lt;-- Please Select --&gt;</asp:ListItem>
                                <asp:ListItem>Yes</asp:ListItem>
                                <asp:ListItem>No</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </asp:Panel>
                    <asp:Panel ID="pnlAppealDate" runat="server" Visible="false">
                        <div class="form-group">
                            <asp:Label ID="lblAppealLodgedDate" runat="server" Font-Bold="True" Text="Date Appeal Lodged:" Width="320px"></asp:Label>
                            <asp:TextBox ID="txtDateLodged" runat="server" CssClass="form-control-static" Width="220px"></asp:TextBox>
                            <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txtDateLodged" WatermarkCssClass="txtwatermark" WatermarkText="dd/mm/yyyy" />
                        </div>
                        <asp:RegularExpressionValidator ID="regexDateAppealLodged" runat="server" ControlToValidate="txtDateLodged" Display="Dynamic" ErrorMessage="* Enter a valid Termination Date (DD/MM/YYYY)" font-bold="true" ForeColor="Red" ValidationExpression="^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                    </asp:Panel>
                    <div class="form-group">
                        <asp:Label ID="lblVSSInterest" runat="server" Font-Bold="True" Text="VSS Interest Confirmed:" Width="320px"></asp:Label>
                        <asp:DropDownList ID="ddlVSS" runat="server" AutoPostBack="True" CssClass="form-control-static" OnSelectedIndexChanged="ddlVSS_SelectedIndexChanged" Width="220px">
                            <asp:ListItem Value="0">&lt;-- Please Select --&gt;</asp:ListItem>
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem>No</asp:ListItem>
                        </asp:DropDownList>
                        <div>
                            <br />
                            <asp:Panel ID="pnlCRIType" runat="server" Visible="false">
                                <div class="form-group">
                                    <asp:Label ID="lblCRIType" runat="server" Font-Bold="True" Text="CRI Type:" Width="320px"></asp:Label>
                                    <asp:DropDownList ID="ddlCRIType" runat="server" CssClass="form-control-static" Width="220px">
                                        <asp:ListItem Value="0">&lt;-- Please Select --&gt;</asp:ListItem>
                                        <asp:ListItem>Psychological</asp:ListItem>
                                        <asp:ListItem>Physical</asp:ListItem>
                                        <asp:ListItem>Psychological &amp; Physical</asp:ListItem>
                                        <asp:ListItem>Other</asp:ListItem>
                                    </asp:DropDownList>
                                </div>
                            </asp:Panel>
                            <div class="form-group">
                                <asp:Label ID="lblDLATerminationDate" runat="server" Font-Bold="True" Text="DLA Termination Date:" Width="320px"></asp:Label>
                                <asp:TextBox ID="DLATerminationDateTextBox" runat="server" CssClass="form-control-static" MaxLength="10" Text='<%# Bind("DLATerminationDate") %>' Width="220px" />
                                <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="DLATerminationDateTextBox" WatermarkCssClass="txtwatermark" WatermarkText="dd/mm/yyyy" />
                                <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="DLATerminationDateTextBox" Display="Dynamic" ErrorMessage="* Enter a valid Termination Date (DD/MM/YYYY)" font-bold="true" ForeColor="Red" ValidationExpression="^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$" ValidationGroup="PIP">*</asp:RegularExpressionValidator>
                                <asp:RequiredFieldValidator ID="reqvalTerminationDate" runat="server" ControlToValidate="DLATerminationDateTextBox" Display="Dynamic" Enabled="False" ErrorMessage="DLA Termination Date Required" font-bold="true" ForeColor="Red" SetFocusOnError="True" ValidationGroup="PIP">*</asp:RequiredFieldValidator>
                            </div>
                            <br />
                            <div class="row text-center">
                                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" cssclass="btn btn-success" OnClick="InsertButton_Click" OnClientClick="changeTextPIP()" Text="Insert" ValidationGroup="PIP" Width="125px" />
                                &nbsp;<asp:Button ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" cssclass="btn" onclick="InsertCancelButton_Click" Text="Cancel" ValidationGroup="PIP" Width="125px" />
                            </div>
                            <br />
                        </div>
                    </div>
                    </InsertItemTemplate>

bootstrap失去发光形式控制

0 个答案: