Удалить IE8 дополнительные отступы от TD элемента - PullRequest
Новая
       3

Удалить IE8 дополнительные отступы от TD элемента

0 голосов
/ 30 января 2012

В IE8 я получаю дополнительное заполнение для элементов td.

Вот мой html

<html>
<head>
    <title>Test page</title>
</head>

<body>
 <div id="actionDiv" width="100%" align="center" style="display:none;"></div>
        <table class="background" width="100%">
            <tr width="100%">
                <td align="center"><div id="new"><input type="button" class="button" value="Button1" id="button1" readonly="readonly"/> </div></td>
                <td align="center"><div id="save"><input type="button" class="button" value="Button1" id="button2" readonly="readonly"/> </div></td>
                <td align="center"><div id="savenew"><input type="button" class="button" value="Button3" id="button3" readonly="readonly"/> </div></td>
                <td align="center"><div id="saveback"><input type="button" class="button" value="Button4" id="button4" readonly="readonly"/> </div></td>
                <td align="center"><div id="select"><input type="button" class="button" value="Button5" id="button5" readonly="readonly"/> </div></td>
                <td align="center"><div id="modify"><input type="button" class="button" value="Button6" id="button6" readonly="readonly"/></div></td>
                <td align="center"><div id="view"><input type="button" class="button" value="Button7" id="button7" readonly="readonly"/></div></td>
                <td align="center"><div id="copy"><input type="button" class="button" value="Button8" id="button8" readonly="readonly"/></div></td>
                <td align="center"><div id="delete"><input type="button" class="button" value="Button9" id="button9" readonly="readonly"/></div></td>
                <td align="center"><div id="report1"><input type="button" class="button" value="Report1" id="report1" readonly="readonly"/> </div></td>
                <td align="center"><div id=""><input type="button" class="button" value="report2" id="Report2"/></td>
                <td align="right" width="100%"><div id="back"><input type="button" class="button" value="Back" id="Button10" readonly="readonly"/> </div></td>
            </tr>
        </table>
</body>
</html>

и мой css файл 

.background {
    background-color: #e6e6e6;
    height: 1px;
}

input.button {
    background-color: #7B9978;
    text-decoration: none;
    font-family: Verdana, Arial, Tahoma;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff; /*width: 100px;*/
    overflow:visible;
    padding: 0px 2px;
    height: 18px;
    border-style: solid;
    border-width: 0px;
    border-color: #000000;
}

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

как вы можете видеть на изображении

enter image description here

между кнопками td имеется значительный отступ между кнопками. Как я могу удалить этот отступ (без использования DOCTYPE) в IE8?

В FF это выглядит так (так должно быть и в IE8)

enter image description here

Ответы [ 3 ]

1 голос
/ 30 января 2012

Это зависит от различного распределения столбцов, когда налагаются противоречивые требования (последняя ячейка имеет ширину = "100%"). Чтобы избежать этого, измените элементы div, содержащие элементы input, на элементы span и поместите их, кроме первого, в первую ячейку строки.

0 голосов
/ 30 января 2012

Это то, как вы можете контролировать

CSS 

table {
    table-layout: fixed;
}

HTML, вы можете изменять ширину и регулировать в зависимости от ваших потребностей. 

   <table class="background" width="100%">
        <tr>
                <td align="center" width="4%"><div id="new"><input type="button" class="button" value="Button1" id="button1" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="save"><input type="button" class="button" value="Button1" id="button2" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="savenew"><input type="button" class="button" value="Button3" id="button3" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="saveback"><input type="button" class="button" value="Button4" id="button4" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="select"><input type="button" class="button" value="Button5" id="button5" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="modify"><input type="button" class="button" value="Button6" id="button6" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="view"><input type="button" class="button" value="Button7" id="button7" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="copy"><input type="button" class="button" value="Button8" id="button8" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="delete"><input type="button" class="button" value="Button9" id="button9" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="report1"><input type="button" class="button" value="Report1" id="report1" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id=""><input type="button" class="button" value="report2" id="Report2"/></div></td>
                <td align="right" width="56%"><div id="back"><input type="button" class="button" value="Back" id="Button10" readonly="readonly"/> </div></td>
        </tr>
    </table>
0 голосов
/ 30 января 2012

У меня нет IE8 для тестирования вашего кода, но это обычно помогает мне: 

table {
    border-collapse: collapse;
}

Кроме того, TD будет использовать отступ в качестве стиля по умолчанию. 

td, table, tr {
    padding:0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...