How to remove 3D border in IE8 with DOCTYPE XHTML?_问答_开发者

How to remove 3D border in IE8 with DOCTYPE XHTML?

开发者 https://www.devze.com 2023-01-19 16:15 出处：网络

The problem: Here is what I do body { border: 0; } as was suggested here: Removing border from WebBrowser control

The problem:

How to remove 3D border in IE8 with DOCTYPE XHTML?

Here is what I do

body {
    border: 0;
}

as was suggested here: Removing border from WebBrowser control

But this only works when we use the following doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

When doctype is changed to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

the nasty border won't go away!

But I need the XHTML doctype in order for "position: fixed" to work in IE.

Any suggestions?

The code:

HTML:

<?xm开发者_Go百科l version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <head>
    <title>Borders, Go Away!</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  </body>
</html>

CSS:

body {
    border: 0;
}

OK, it seems there is no way to remove the border from CSS when XHTML DOCTYPE is used in IE.

I ended up implementing GetHostInfo method of the IDocHostUIHandler interface of the WebBrowser control/component in my desktop app, as this example in Delphi illustrates: Frameless Web Browser

And here is another related question here on StackOverflow: Remove border on activex ie control

I think it's due to inheritance, you should use border:0 for each element you want to remove borders.

border isn't inherited, so setting it at the body as per your example will only affect the border style of the body element itself.

If you want everything to lose its border by default, you should use * which is the CSS wildcard:

* {
    border:0;
}

However, only a few elements actually have borders by default (mainly tables, etc, but also img if it's inside an a), so you may prefer to list just those elements specificially:

body, table, tr, td, img {
    border:0;
}

It's more readable that way than *, and probably better practice too.

Hope that helps.

On IE 9 and IE 11 I observe that the 3D border is always there if the page has a <!DOCTYPE html>. There is absolutely no way to turn it off with CSS. I tried this without success:

html { margin:0px; padding:0px; border:0px; }
body { margin:0px; padding:10px; border:0px; }

Attention: This problem only appears if you embed Internet Explorer into a C++ project (CHtmlView). But if you open the same webpage in an embedded Internet Explorer in a .NET 4.0 project (System.Windows.Forms.WebBrowser) the 3D border will not appear. And if you open the same webpage in Internet Explorer itself (iexplore.exe) the 3D border will also not appear.

But I found an easy solution if you have the IE in an MFC project. MFC already implements the IDocHostUIHandler which is required for that.

Derive a class from CHtmlView and overwrite OnGetHostInfo():

Header:

class CMyHtmlView : public CHtmlView
{
protected:
   virtual HRESULT OnGetHostInfo(DOCHOSTUIINFO *pInfo);
};

Implementation:

HRESULT CMyHtmlView::OnGetHostInfo(DOCHOSTUIINFO *pInfo)
{
    HRESULT hr = CHtmlView::OnGetHostInfo(pInfo);
    pInfo->dwFlags = DOCHOSTUIFLAG_NO3DBORDER;
    return hr;
}

and the stupid 3D border is gone!

Alternative: use a background for the table, another background for the cell then cellspacing.

<TABLE WIDTH="15" HEIGHT="15" BORDER="0" CELLPADDING="0" CELLSPACING="1" BGCOLOR="#000000" >
    <TR VALIGN="MIDDLE" >
        <TDALIGN="CENTER" BGCOLOR="#FFFFFF">
        hi
        </TD>
    </TR>
</TABLE>