Fieldset padding в IE8

Question

Я довольно новичок в веб-работе. Я прошу прощения, если этот вопрос является тривиальным или излишним. Я искал отступы для набора полей, но ничего особенного для этого не увидел.

Вот как выглядит мое окно в Chrome против IE8.

Хром: http://i.stack.imgur.com/rH7w0.png IE8: http://i.stack.imgur.com/6v6kZ.png

Как видите, все отступы полностью выброшены.

    <fieldset>
    <legend>Refresh Settings</legend>
    <table>
        <tr>
            <td class="AutoRefreshEnabled">
                Auto-Refresh Enabled:</td>
            <td class="AutoRefreshCheckbox">
            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
            </td>
            <td class="AutoRefreshNumericTextbox">
                <telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" 
                    Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="0" 
                    ShowSpinButtons="True" Value="0" Width="225px" Enabled="False" 
                    LabelCssClass="riLabel LabelDisabled">
                <NumberFormat DecimalDigits="0" />
                </telerik:RadNumericTextBox>
            </td>
        </tr>
    </table>
</fieldset>

<fieldset>
    <legend>Tab Settings</legend>
        <div>
            <div class="FloatLeft">
                <telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" AllowReorder="True" 
                                EnableDragAndDrop="True" Skin="Web20" Height="95px" 
                                onclientitemdoubleclicked="OnClientItemDoubleClicked" 
                                onclientselectedindexchanged="OnClientSelectedIndexChanged" 
                    Width="150px" AutoPostBack="True" AutoPostBackOnReorder="True" 
                    onreordering="RadListBox1_Reordering" onclientload="OnClientLoad">
                </telerik:RadListBox>
            </div>
            <div class="FloatRight">
                <telerik:RadTextBox ID="RadTextBox1" Runat="server" EmptyMessage="Enter tab name" Skin="Web20" Width="150px">
                </telerik:RadTextBox>
                <div class="TabButton">
                    <telerik:RadButton ID="RadButton1" runat="server" onclick="RadButton1_Click" Skin="Web20" Text="Add Tab" 
                        onclientclicked="OnButtonClicked">
                    </telerik:RadButton>
                </div>
            </div>   
        </div>
</fieldset>

<fieldset>
    <legend>Tab Cycle Settings</legend>
    <table>
        <tr>
            <td class="AutoCycleEnabled">
                Auto-Cycle Enabled:</td>
            <td class="AutoCycleCheckbox">
            <asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
            </td>
            <td class="AutoCycleNumericTextbox">
                <telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server" 
                    Label="Auto-Cycle Interval (Minutes):" MaxValue="60" MinValue="0" 
                    ShowSpinButtons="True" Value="0" Width="225px" Enabled="False" 
                    LabelCssClass="riLabel LabelDisabled">
                <NumberFormat DecimalDigits="0" />
                </telerik:RadNumericTextBox>
            </td>
        </tr>
    </table>
</fieldset>

<div class="BottomButtons">
    <telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" >
    </telerik:RadButton>
    <telerik:RadButton ID="RadButton3" runat="server" Skin="Web20" Text="Cancel" OnClientClicked="CloseAndCancel" >
    </telerik:RadButton>
</div>

body
{
    font-size: 12px;
    font-family: "segoe ui",arial,sans-serif;
}

.LabelEnabled
{
    color: Black !important;
}

.LabelDisabled
{
    color: Gray !important;
}

.riTextBox
{
    color: Black !important;
}

.AutoRefreshEnabled
{
    width: 123px;
}

.AutoRefreshCheckbox
{
    width: 20px;
}

.AutoRefreshNumericTextbox
{
    width: 32px;
}

.AutoCycleEnabled
{
    width: 123px;
}

.AutoCycleCheckbox
{
    width: 20px;
}

.AutoCycleNumericTextbox
{
    width: 32px;
}

.TimeframeRestricted
{
    width: 314px;
}

.DataPointsShown
{
    width: 314px;
}

.TimeframeCheckbox
{
    width: 40px;
}

.DatapointsCheckbox
{
    width: 40px;
}

.TimeframeDateTimePickers
{
    width: 150px;
}

.FloatLeft
{
    float: left;
}

.FloatRight
{
    float: right;
    padding-right: 55px;
}

.TabButton
{
    text-align: left; 
    padding-top: 2px;
}

.BottomButtons
{
    position: absolute; 
    left: 134px; 
    bottom: 13px;
}

Кто-нибудь с большим опытом веб-разработки, чем я, может легко объяснить эту проблему? Это будет высоко ценится.

Спасибо за ваше время.

Answer 1

это вещь IE, и легенда - виновник более простой скрипки с некоторой "броской" окраской, а принудительное заполнение показывает, что единственный набор полей, который фактически содержит себя, это без легенды - http://jsfiddle.net/eDtDh/

Я никогда не использовал легенду, и я забыл почему, но я думаю, что это причина того, что в IE7 / 6 и т. Д. Это то же самое. Вы можете создать собственную легенду с помощью элемента заголовка и расположить ее относительно легенда