Неверный размер текстовой области HTML в таблице в ie8.Проблема с типом документа?

StackOverflow https://stackoverflow.com/questions/1945581

Вопрос 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">       
        #textarea1 {
            width: 100%;
            overflow:hidden;
        }
        #table1 {
    background-color:#0000ff;
    width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1">
    <table id="table1" >
        <tr><td><textarea  cols="0" rows="2" id="textarea1"></textarea></td></tr>
    </table>
    </form>
</body>
</html>

Текстовое поле неправильно отображается ie8 в таблице (оно шире, чем ее ячейка).Если я удалю тег doctype, он отобразится правильно.Я делаю что-то глупое

Это было полезно?

Решение

IE, по какой-то причине, интерпретирует 100% ширину ячейки таблицы как 100px-(padding/2), унаследованную от вашего свойства ширины #table1.И вот тут-то все по-настоящему и портится:размер ячейки в таблице по умолчанию равен 3 пикселям, поэтому технически ширина вашей ячейки должна составлять 94 пикселя, а ширина должна составлять 100% от этой ширины...94 пикселя.Вместо этого он применяет 100 пикселей.

Если вы явно зададите свойство width ячейки таблицы, оно может исправить его, но только после того, как вы зададите cellspacing и cellpadding Для 0, и тот border-width из текстовой области в 0.

например ,:

#textarea1 {
width: 100%;
overflow:hidden;
margin:0;
padding:0;
border:0;
}
#table1 {
background-color:#0000ff;
width: 100px;
padding:0;
margin:0;
border-spacing:0;
border-collapse:collapse;
}
#table1 td {
width:100px;
padding:0;
margin:0;
}

Альтернативой, если вам нужны обычные границы вокруг вашего текстового поля, является определение width для td как 100px - border-wdith*2.

Надеюсь, это поможет, найди

Другие советы

cols="0" кажется немного глупым.Установите разумное значение для пользователей без CSS.

Возможно, вы захотите попробовать удалить границы и отступы из textarea:

#textarea1 {
    width: 100%;
    overflow:hidden;
    margin: 0;
    border-style: none;
    padding: 0;
}

width относится к ширине области содержимого элемента, т.е.область внутри полей, границ и отступов

Я обнаружил, что если вы используете элемент управления <asp:textbox> с атрибутами runat="server" и TextMode="MultiLine", он работает нормально.И если вы просмотрите исходный код - как ни странно - вы получите текстовую область HTML так, как вы ее определили (я не смог найти никаких различий между рендерингом asp и простым определением текстового поля в таблице в формате HTML).

Если у вас все равно есть asp.net, вы можете легко использовать его таким образом, он прекрасно отображается.Все, что вам нужно сделать, это поставить префикс «ctl00_MainContent_» перед идентификатором (или что-то еще, что ASP.NET отображает в вашем случае, в зависимости от среды) — просто найдите его один раз через «просмотр источника» в IE или с помощью панели инструментов разработчика.

Итак, в jQuery

$('#ctl00_MainContent_myTextbox').val()

получит значение, если

<asp:TextBox ID="myTextbox" runat="server" TextMode="MultiLine" style="height:50px; width:90%"></asp:TextBox>

определено в вашем коде.Для вашего удобства вы можете поместить префикс «#ctl00_MainContent_» в переменную, например:

var aspPrefix='#ctl00_MainContent_'; // global variable
var textValue = $(aspPrefix+'myTextbox').val(); // example to get value

Все остальное работает так, как и следовало ожидать.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top