tag issue in webbrowser

Question

When I try to add a <br> tag after table and open it using winforms control WebBrowser.

<!DOCTYPE HTML><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="left" width="100%"> <tbody>
<tr>
<td style="background:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" cellpadding="7px 6px 7px 15px" style="background:#fff8e5;padding:5pt 4pt 5pt 12pt;word-wrap:break-word">
<div style="color:#222222;"><span style="color:#222; font-weight:bold;">Caution:</span> Test caution here.
</div>
</td>
</tr>
</tbody>
</table>
<br>
<div>
<p>Test string here.</p>
</div>
</body>
</html>

It seems that it doesn't insert single line breaks in the text.

But it works in Edge and Chrome.

Why?

I know there are some workarounds to handle this issue, such as "add doube <br> after table"

</table>
<br>
<br>
<div>

or remove align="left"

<table border="0" cellspacing="0" cellpadding="0" width="100%">

However,is there any way to solve this problem once and for all? Instead of manually modifying each html file.

You can use margin bottom on table instead of br or margin-top on div — Nisha, Jan 29 '23 at 09:34
While I'd suggest you set the browser emulation using one of the suggested approaches below, but you should know you can fix the issue with removing `align="left"` from the table. Alternatively, you can use just one br, using `
` next to it. — Reza Aghaei, Jan 29 '23 at 13:52
@RezaAghaei Note that the [
](https://html.spec.whatwg.org/dev/semantics.html#the-br-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Jan 29 '23 at 14:32
Note that the `align` attribute has been [obsolete](https://html.spec.whatwg.org/dev/obsolete.html#obsolete) for a decade or more. — Rob, Jan 29 '23 at 14:33
A `
` element is inserted into the markup. However, a '
` element is a **line break** and you have no textual lines. So a break is inserted of zero height as expected. — Rob, Jan 29 '23 at 14:36
@Rob it's It's just fine to use `
` however `/` is not mandatory. But in general it's an off-topic discussion for this thread. It doesn't have anything to do with the issue, or the solution. Further reading for the OP or anyone who is interested: https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br — Reza Aghaei, Jan 29 '23 at 14:53
@RezaAghaei That's why it's a comment. Furthermore, the closing slash has no meaning, it does nothing, and browsers ignore it. So it's pointless and the W3C validator will warn you of it. A better link from the W3C would be [Trailing slashes](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements) — Rob, Jan 29 '23 at 14:55

Jimi · Answer 1 · 2023-01-30T12:14:48.013

3

You should add a meta-tag that specifies the emulation mode, setting it to Internet Explorer 11 (the latest version available in the System of IE):

<meta http-equiv="X-UA-Compatible" content="IE=edge">

which gives you the expected behavior.
You can make a simple procedure that batch-adds this line right after <head> in your files.

If possible, probably better migrate to WebView2 to have the Edge-Chromium experience
See: Introduction to Microsoft Edge WebView2

edited Jan 30 '23 at 12:14

answered Jan 29 '23 at 11:32

Jimi

29,621
8
43
61

Note that the [](https://html.spec.whatwg.org/dev/semantics.html#the-meta-element) tag does not use and does not need a closing slash and never has in any HTML specification. – Rob Jan 29 '23 at 14:30
@Rob Removed. It doesn't matter much though – Jimi Jan 30 '23 at 12:16
It's allowed for backwards compatibility. It does nothing, has no meaning, and browsers are instructed to ignore it. So it's pointless – Rob Jan 30 '23 at 13:32

score 2 · Answer 2 · answered Jan 29 '23 at 13:27

If you cannot change HTML content, you can set the browser emulation to a higher IE version, like IE11 Edge mode in code. For example when loading the form, before setting the browser content:

using (var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
    @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION",
    true))
{
    var app = System.IO.Path.GetFileName(Application.ExecutablePath);
    key.SetValue(app, 11001, Microsoft.Win32.RegistryValueKind.DWord);
    key.Close();
}

For more information: How can I get the WebBrowser control to show modern contents?

tag issue in webbrowser

2 Answers2