添加 <pre> 会导致表格单元格炸毁？

Question

我使用“pre”标签来允许 textarea 框通过换行符，因为我在表单被替换时将 html 剥离出来。问题在于添加“pre”......我的表格单元格扩大到巨大的比例，我不知道为什么......

提前致谢

前置标记前：

前置标记后：

这是该表的代码：

<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/>
<table class="data_table vert_scroll_table" style="width:360px;">
    <tr>
    <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>    
    <ctl:sortableTblHdr styleClass="center" title="Created By" property="auditable.createdBy.lastName" type="top">Entered By</ctl:sortableTblHdr>

    </tr>
    <c:forEach var="comments" items="${entry.comments}">


    //PRE HERE!!    ----->>>   <tr id="id${comments.id}">
           <td id="comments-${comments.id}"  style="width:360px;"><pre>${comments.comment}</pre></td>

        <c:choose>
        <c:when test="${comments.auditable != null}">
        <td title="${comments.auditable.createdBy.lastName},  ${comments.auditable.createdBy.firstName} on 
            <fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />"><span class="mouseover_text">${comments.auditable.createdBy.lastName}, ${comments.auditable.createdBy.firstName} on 
        <fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />
        </td>
        </c:when>
        <c:otherwise>
        <td  colspan="1">&nbsp;</td>
        </c:otherwise>
        </c:choose>
        </tr> 
    </c:forEach>

    <c:if test="${lock.locked || form.entryId < 0 }">

    <%-- This is the row for adding a new comment. --%>           

        <tr id="commentRow">              
         <td>
         You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br/>
            <textarea id="comment" name="comment" rows="2" cols="125" style="width:320px;"
                 onkeypress="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"></textarea>

                    <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
        </td>
        <td class="shaded" colspan="1">&nbsp;</td>
        </tr>

    </c:if>
</table>

pre
{
white-space: pre-wrap;                  /* css-3 */
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
word-wrap: break-word;                  /* Internet Explorer 5.5+ */
width: 99%;
}

Answer 1

您的问题是：width: 99%; 在pre。删除该行。

Answer 2

不要（ab）使用<pre>。只需使用<c:out> 对用户控制的输入进行 HTML 转义即可防止 XSS。

<c:out value="${comments.comment}" />