HTML Textarea IE8의 테이블에서 크기가 올바르게 크지 않습니다. Doctype 문제?

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>

Textarea는 테이블에서 IE8에 의해 올바르게 렌더링되지 않습니다 (세포보다 넓습니다). DocType 태그를 제거하면 올바르게 렌더링됩니다. 내가 바보 같은 일을하고 있습니까?

도움이 되었습니까?

해결책

즉, 어떤 이유로, #표 1 너비 속성에서 상속 된 테이블 셀의 100% 너비를 100px- (패딩/2)로 해석합니다. 이제 테이블에는 3 픽셀의 기본 셀 스페이스가 있으므로 기술적으로 셀의 너비는 94px이어야하며 그 너비의 100%는 ... 94px 여야합니다. 대신 100px를 적용하고 있습니다.

테이블 셀의 너비 속성을 명시 적으로 설정하면 수정 될 수 있지만 cellspacing 그리고 cellpadding 에게 0, 그리고 border-width Textarea의 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

다른 팁

cols="0" 약간 멍청한 것 같습니다. CSS가없는 사용자에게 합리적인 값으로 설정하십시오.

테두리를 제거하고 패딩을 시도해 볼 수 있습니다. textarea:

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

width 요소 내용 영역의 너비, 즉 여백 내부의 영역, 테두리 및 패딩을 나타냅니다.

당신이 사용하는 경우u003Casp:textbox> runat = "server"및 textmode = "multiline"속성을 가진 컨트롤은 잘 작동합니다. 그리고 당신이 소스를 보면 - 이상한 것만으로도 얻는 것은 당신이 정의했던 것처럼 HTML TextRea입니다 (ASP 렌더링과 테이블 내 텍스트 상자의 간단한 HTML 정의 사이의 차이점을 찾을 수 없었습니다).

어쨌든 asp.net이 있다면 쉽게 사용할 수 있습니다. ID (또는 주변 환경에 따라 경우 ASP.NET이 귀하의 경우 렌더링하는 모든 것을 렌더링하기 전에 Prefix "CTL00_MainContent_"를 넣는 것만으로도 또는 IE 또는 Developer Toolbar에서 "View Source"를 통해 한 번 찾아보십시오.

jQuery에서 a

$ ( '#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