如何让WebBrowser控件不忽略HTML文档中的空白行?
问题描述
我在WebBrowser控件中显示HTML文档时,所有空白行都被忽略了——这些空白行在Chrome等浏览器中能正常显示,段落间有明显间隔,但WebBrowser控件里内容紧密排列,完全看不到空白分隔。
我通过File.ReadAllText()读取文档为字符串后,用以下方法传递给控件:
public void SetWebBrowserContent(string html) { webBrowser1.Navigate("about:blank"); if (webBrowser1.Document != null) { webBrowser1.Document.Write(string.Empty); } webBrowser1.DocumentText = html; }
对应的HTML片段如下:
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title></title> <meta name="Generator" content="PowerTools for Open XML" /> <style> span { white-space: pre-wrap; } h1.pt-Heading1 { margin-top: 12pt; line-height: 107.9%; margin-bottom: 0; font-family: 'Calibri Light', 'sans-serif'; font-size: 16pt; margin-left: 0; margin-right: 0; } span.pt-DefaultParagraphFont { color: #2F5496; font-family: 'Calibri Light', 'sans-serif'; font-size: 16pt; font-style: normal; font-weight: normal; margin: 0; padding: 0; } p.pt-Normal { line-height: 107.9%; margin-bottom: 0; font-family: Calibri; font-size: 11pt; margin-top: 0; margin-left: 0; margin-right: 0; } span.pt-000000 { font-size: 11pt; font-style: normal; font-weight: normal; margin: 0; padding: 0; } p.pt-NormalWeb { margin-top: 0; margin-bottom: 0; text-align: justify; background: #FFFFFF; font-family: Open Sans; font-size: 10.5pt; line-height: 108%; margin-left: 0; margin-right: 0; } span.pt-DefaultParagraphFont-000001 { color: #000000; font-family: Open Sans; font-size: 10.5pt; font-style: normal; font-weight: normal; margin: 0; padding: 0; } span.pt-000002 { color: #000000; font-size: 10.5pt; font-style: normal; font-weight: normal; margin: 0; padding: 0; } body { margin: 1cm auto; max-width: 20cm; padding: 0; } </style> </head> <body> <div> <h1 dir="ltr" class="pt-Heading1"><span class="pt-DefaultParagraphFont">Heading</span></h1> <p dir="ltr" class="pt-Normal"><span xml:space="preserve" class="pt-000000"> </span></p> <p dir="ltr" class="pt-NormalWeb"><span class="pt-DefaultParagraphFont-000001">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate sed neque eget faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere porttitor elementum. Donec sem tellus, condimentum non congue vel, fermentum nec velit. Donec vestibulum malesuada placerat. Duis rhoncus lorem ligula, quis molestie lectus laoreet eget. Vivamus finibus lacinia elit, ut sagittis magna dignissim id. Praesent nisi lorem, pharetra non feugiat a, elementum sit amet urna. Nulla est velit, pharetra quis lacus vestibulum, faucibus laoreet elit. Praesent dignissim gravida urna sed tempor. Suspendisse fringilla, purus eget ullamcorper pharetra, dui turpis maximus mauris, eu aliquet orci felis a elit. Vestibulum tempus ipsum eros, nec semper nulla lobortis quis.</span></p> <p dir="ltr" class="pt-NormalWeb"><span xml:space="preserve" class="pt-000002"> </span></p> <p dir="ltr" class="pt-NormalWeb"><span class="pt-DefaultParagraphFont-000001">Nam ultricies ultrices dolor non viverra. Nam ante odio, porttitor vel cursus a, pellentesque eu turpis. Suspendisse congue sed lacus id fermentum. Duis lobortis, leo eu blandit egestas, lectus orci aliquet enim, in mattis mauris nibh vestibulum ipsum. Phasellus lacinia lectus eget libero iaculis euismod. Nunc placerat non mauris eget sagittis. Fusce rutrum dolor vel leo suscipit iaculis. Aliquam lacinia quam non nisi iaculis maximus.</span></p> <p dir="ltr" class="pt-Normal"><span xml:space="preserve" class="pt-000000"> </span></p> <p dir="ltr" class="pt-NormalWeb"><span class="pt-DefaultParagraphFont-000001">Nam ultricies ultrices dolor non viverra. Nam ante odio, porttitor vel cursus a, pellentesque eu turpis. Suspendisse congue sed lacus id fermentum. Duis lobortis, leo eu blandit egestas, lectus orci aliquet enim, in mattis mauris nibh vestibulum ipsum. Phasellus lacinia lectus eget libero iaculis euismod. Nunc placerat non mauris eget sagittis. Fusce rutrum dolor vel leo suscipit iaculis. Aliquam lacinia quam non nisi iaculis maximus.</span></p> <p dir="ltr" class="pt-NormalWeb"><span class="pt-DefaultParagraphFont-000001">Nam ultricies ultrices dolor non viverra. Nam ante odio, porttitor vel cursus a, pellentesque eu turpis. Suspendisse congue sed lacus id fermentum. Duis lobortis, leo eu blandit egestas, lectus orci aliquet enim, in mattis mauris nibh vestibulum ipsum. Phasellus lacinia lectus eget libero iaculis euismod. Nunc placerat non mauris eget sagittis. Fusce rutrum dolor vel leo suscipit iaculis. Aliquam lacinia quam non nisi iaculis maximus.</span></p> <p dir="ltr" class="pt-Normal"><span xml:space="preserve" class="pt-000000"> </span></p> </div> </body> </html>
解决方案
WebBrowser控件基于IE内核,对HTML空白和CSS的处理逻辑和现代浏览器有差异,可通过以下方式修复:
1. 调整CSS样式,给空白段落添加间距
当前HTML中用于分隔的空段落(如p.pt-Normal、空内容的p.pt-NormalWeb)的margin都设为0,WebBrowser会忽略这类空元素的占位。修改CSS,给这些段落添加上下边距即可:
/* 专门给用作分隔的空段落添加底部间距 */ p.pt-Normal { margin-bottom: 12pt; } /* 或者给所有正文段落添加底部间距,替代空段落的作用 */ p.pt-NormalWeb { margin-bottom: 12pt; }
2. 强制WebBrowser使用最新IE渲染模式
WebBrowser默认可能启用兼容模式,导致渲染行为和现代浏览器不一致。在HTML头部添加以下meta标签,让控件使用最新的IE引擎渲染:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3. 替换空段落为换行标签(备选)
如果不想修改CSS,也可以把HTML中的空<p>标签替换成<br><br>,直接生成空白间隔,但这种方式灵活性较差,适合临时调整。
内容的提问来源于stack exchange,提问作者fikewek832
相关产品推荐
相关产品推荐

