HTML текстовая область неверно измерена в таблице в ie8. Doctype проблема? - PullRequest
Новая
       28

HTML текстовая область неверно измерена в таблице в ie8. Doctype проблема?

1 голос
/ 22 декабря 2009 
<!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, он отображается правильно. Я делаю что-то глупое

Ответы [ 3 ]

0 голосов
/ 23 декабря 2009

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

Если вы явно задаете свойство 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.

Надеюсь, это поможет, nd

0 голосов
/ 27 октября 2011

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

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

Так в jQuery,

$ ( '# ctl00_MainContent_myTextbox'). Вал ()

извлечет значение, если 

<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

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

0 голосов
/ 23 декабря 2009

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

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

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

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

...