jquery - IE8 令人头疼 - 无法识别空白 : pre-wrap

这乍一看似乎是一项简单的任务，其中涉及添加空白:预包装到 CCE 样式表以保留空格和换行符。目前，以下内容在 Firefox 中完美运行。另一方面，在 IE* 中，它只是一个没有中断的文本 block 。

.custom_pre {
        word-wrap: break-word; /* IE */ 
        white-space: pre-wrap; /* CSS 2.1 */                            
}

当我在 IE8 中打开开发工具时，我没有看到任何冲突。当我尝试 white-space: pre它只是添加一行没有换行的文本。当我尝试添加 <!DOCTYPE html>没什么区别。我尝试将文本包装在 DIV 中，但什么也没做。我试着敲打我的屏幕，但也没有。

有人知道我缺少什么才能与 IE8 一起使用吗？我迷路了。

源代码:

<!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" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ID_x0023_ msdt:dt="string">123</mso:ID_x0023_></mso:CustomDocumentProperties></xml><![endif]-->
<link type="text/css" href="Scripts/Custom_CSS/whiteboard_custom_12.css" rel="stylesheet" />
<SCRIPT LANGUAGE="JavaScript" SRC="Scripts/jquery/jquery-1.11.2.min.js"></SCRIPT>
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Severities</title>
<!--mstheme--><link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="../../../_themes/ENSEMBLENEWLOGOTHEME/ENSE1011-65001.css"><meta name="Microsoft Theme" content="ENSEMBLENEWLOGOTHEME 1011, default">
<script type="text/javascript"> 
$( document ).ready(function() {
$(".custom_pre").each(function() {
   var $this = $(this);
   $this.html($this.text());

});  
});
</script>

<style type="text/css"> 
.style2 {
                text-align: left;
}
.style3 {
                text-decoration: none;
}
</style>

</head>

<body>

<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="MSO_PageHashCode" id="MSO_PageHashCode" value="9" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__REQUESTDIGEST" id="__REQUESTDIGEST" value="0xC3C2C98CCA1FF9BC9AB9BC539EB6B249106AB016897D63255384C3F1046CD6F7703DD22F7F111220E078EA44ADDB16DBCAE8F40B59AFA6E15F82F59117AAD46E,10 Jun 2015 01:33:44 -0000" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUBMA9kFgICAg9kFgICAQ8PFgIeC1BhcmFtVmFsdWVzMokEAAEAAAD/////AQAAAAAAAAAMAgAAAFhNaWNyb3NvZnQuU2hhcmVQb2ludCwgVmVyc2lvbj0xMi4wLjAuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj03MWU5YmNlMTExZTk0MjljBQEAAAA9TWljcm9zb2Z0LlNoYXJlUG9pbnQuV2ViUGFydFBhZ2VzLlBhcmFtZXRlck5hbWVWYWx1ZUhhc2h0YWJsZQEAAAAFX2NvbGwDHFN5c3RlbS5Db2xsZWN0aW9ucy5IYXNodGFibGUCAAAACQMAAAAEAwAAABxTeXN0ZW0uQ29sbGVjdGlvbnMuSGFzaHRhYmxlBwAAAApMb2FkRmFjdG9yB1ZlcnNpb24IQ29tcGFyZXIQSGFzaENvZGVQcm92aWRlcghIYXNoU2l6ZQRLZXlzBlZhbHVlcwAAAwMABQULCBxTeXN0ZW0uQ29sbGVjdGlvbnMuSUNvbXBhcmVyJFN5c3RlbS5Db2xsZWN0aW9ucy5JSGFzaENvZGVQcm92aWRlcgjsUTg/AgAAAAoKCwAAAAkEAAAACQUAAAAQBAAAAAIAAAAGBgAAAAZVc2VySUQGBwAAAAVUb2RheRAFAAAAAgAAAAYIAAAAEE1vbnRlcm8sIEVsbGlzb24GCQAAABQyMDE1LTA2LTA5VDIxOjMzOjQ0WgtkZGRzI5AVYbWSVOMPEjf44VCZqp7nuw==" />
</div>

<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=PNpbHW9JZZojtV41Fp9GxQ2&amp;t=635186629044772859" type="text/javascript"></script>

<script> var MSOWebPartPageFormName = 'form1';</script><script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script><script type="text/javascript" language="javascript" src="/_layouts/1033/core.js?rev=mHKsOQ0iU3Q5jdm9OZNDdg%3D%3D"></script>
<script type="text/javascript"> 
//<![CDATA[

                function DoCallBack(filterText)
                {
                    WebForm_DoCallback('g_a652973d_3b2a_41e3_808c_f3193354b309',filterText,UpdateFilterCallback,0,CallBackError,true);
                }
                function CallBackError(result, clientsideString)
                {                
                }
            //]]>
</script>
<script type="text/JavaScript" language="JavaScript"> 
<!--
var L_Menu_BaseUrl="/sites/SERVIPCManagement/imc";
var L_Menu_LCID="1033";
var L_Menu_SiteTheme="ENSEMBLENEWLOGOTHEME";
//-->
</script><SCRIPT LANGUAGE='JavaScript' > 
<!--
//-->
</SCRIPT>
                <table style="width: 100%">
                                <tr>
                                                <td>
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td valign="top"><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPartg_a652973d_3b2a_41e3_808c_f3193354b309" width="100%" OnlyForMePart="true" allowDelete="false" style="" ><table border="0" align="center" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt2="urn:frontpage:internal"><tr><td><table border="0" cellspacing="0" width="900px"><tr><td class="style2" style="height: 226px;"><br><br><table width="900px" align="left" class="style16" border="1" cellspacing="1" cellpadding="1"><tr><td colspan="4" style="border: 1px solid #C0C0C0; padding: 10px; background-color: #CCCCCC;" align="center"><strong>SM Handoff</strong></td></tr><tr><td style="width: 183px"><strong>Client:</strong></td><td colspan="3">RSA</td></tr><tr><td style="width: 183px"><strong>Ticket:</strong></td><td>2341419</td><td width="100px"><strong>MINT</strong>:</td><td>20150609112</td></tr><tr><td style="width: 183px"><strong>Incident Description:</strong></td><td colspan="3">eBusiness Websites unavailable</td></tr><tr><td style="width: 183px"><strong>Business

                                            Impact:</strong></td><td colspan="3" class="custom_pre">Customers test test test test.
<br/>
<br/>&amp;lt;&amp;gt;()&amp;quot;&amp;#39;&amp;amp;</td></tr><tr><td style="width: 183px"><strong>What was done:</strong></td><td colspan="3" class="ms-alignleft"><div class="custom_pre">- test
<br/>
<br/>- test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>*MINT* 
<br/>Testtesttesttesttest.
<br/></div></td></tr><tr><td style="width: 183px"><strong>Next steps:</strong></td><td colspan="3" class="custom_pre">Test
<br/>
<br/>NEXT MINT: June 10th at 12:00   </td></tr><tr><td style="width: 183px"><strong>Resources</strong>:</td><td colspan="3" class="custom_pre">Test: test
<br/>test: test </td></tr><tr><td style="width: 183px"><strong>Last  
                                            SM assigned:</strong></td><td colspan="3">test</td></tr></table></td></tr></table></td></tr></table></div></td>
    </tr>
</table>

                                                                                    </td>
                                </tr>
                </table>


<script type="text/javascript"> 
//<![CDATA[

WebForm_InitCallback();//]]>
</script>
</form>

</body>

</html>

最佳答案

我没有实际的 ie8 浏览器来测试，但在 ie11 上使用 ie 8 仿真，并查看 this page Eric Meyer 的，它看起来像 white-space: pre-wrap; 在 IE8 中工作得很好:

white-space: pre-wrap

This page似乎也表明这应该在 IE8 中工作。

也许您的页面上还有其他问题(实际代码/html/css 总是有帮助)。

编辑:自从看到您的代码后，您的实际问题似乎是您替换要显示的文本部分的方式。看起来将部分转换为文本，然后通过 jQuery 返回 html 会弄乱您的格式(可能会删除所有换行符)。相反，您可以尝试使用 this answer ，或该页面上的另一个替换该部分中的违规字符。 ...或者如果来自数据库可能只是替换服务器端。

关于jquery - IE8 令人头疼 - 无法识别空白 : pre-wrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30745105/

jquery - IE8 令人头疼 - 无法识别空白 : pre-wrap

上一篇：html - 我的 html/css 导航栏悬停功能导致列表项移出位置

下一篇：javascript - 未捕获的类型错误 : Cannot read property 'width' of undefined