HTML中嵌套去边框方法

最新推荐文章于 2022-07-18 10:58:33 发布

liuyineng

最新推荐文章于 2022-07-18 10:58:33 发布

阅读量1.3k

点赞数

分类专栏：编程语言文章标签： html css

编程语言专栏收录该内容

4 篇文章 0 订阅

订阅专栏

E webbrowser 网页嵌套去掉边框隐藏滚动条

前一段时间升级了一个程序，将程序的主界面用网页来设计，效果非常好，用 HTML+CSS 可以实现更加丰富的界面效果，比直接用 Delphi 来得容易。

　　实现的方法很简单，在窗体添加一个 WebBrowser 组件，然后执行以下代码：

　　WebBrowser1.Navigate('D:\Soft\HomePage.html');

　　但随之而来出现了一个问题：WebBrowser 组件在未载入 HTML 之前是无边框的，当载入 HTML 之后，WebBrowser 四周出现了一个三维边框，和程序本身的风格极不协调，查看了 WebBrowser 的所有属性，没有属性可以改变这一设置。

　　经过测试以后发现，该边框并不是 WebBrowser 产生的，而是 WebBrowser 中载入的 HTML 产生的，如果是这样的话，那问题就好解决了，真接用 CSS 去掉边框：

　　body { border: 0px; overflow: auto; /*可自动隐藏或显示滚动条；设为 hidden 完全隐藏滚动条*/ }

　　当你高兴地设置以上 CSS 后，却发现 WebBrowser 的边框却依然存在，是 CSS 错了吗？NO，是你的 DOCTYPE 出了问题，以上的 CSS 在 XHTML 下是无效果的，将 DOCTYPE 设为 HTML4 即可：

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

网上搜了一下，提问题的人不少，找到合适的答案不容易。我把自己曾经总结的贴出来，希望能够对需要的朋友有用。

HRESULT hr;
IDispatch *pDisp = GetHtmlDocument();

IHTMLDocument2 *pDocument = NULL;
IHTMLElement* pEl;
IHTMLBodyElement *pBodyEl;
hr = pDisp->QueryInterface(IID_IHTMLDocument2, (void**)&pDocument);
if(SUCCEEDED(pDocument->get_body(&pEl)))
{
if(SUCCEEDED(pEl->QueryInterface(IID_IHTMLBodyElement, (void**)&pBodyEl)))
{
pBodyEl->put_scroll(L"no");//去滚动条
}
IHTMLStyle *phtmlStyle;
pEl->get_style(&phtmlStyle);

if(phtmlStyle != NULL)
{
phtmlStyle->put_overflow(L"hidden");
phtmlStyle->put_border(L"none");// 去除边框

phtmlStyle->Release();
pEl->Release();
}
}

///

VC++ 怎样去掉webbrowser2 的滚动条
LPDISPATCH lpidsp=m_WebBrowser2.GetDocument();

ASSERT(lpidsp);
IHTMLDocument2 *pDoc=NULL;
HRESULT hr;
hr=lpidsp->QueryInterface(IID_IHTMLDocument2,(void**)&pDoc);
ASSERT(SUCCEEDED(hr));
ASSERT(pDoc);
IHTMLElement *pBody=NULL;
hr=pDoc->get_body(&pBody);
ASSERT(SUCCEEDED(hr));
ASSERT(pBody);
IHTMLElement *pElement=NULL;
hr=pBody->QueryInterface(IID_IHTMLElement,(void**)&pElement);
ASSERT(SUCCEEDED(hr));
ASSERT(pElement);

CComBSTR v("SCROLL");
CComVariant vv="no";
pElement->setAttribute(v,vv,0);

我的WebBrowser控件的原文件index.htm中的HTML代码如果是以下作为文件的顶级元素时,则无法去掉控件的边框和滚动条,如图1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Sys_Caption_Logo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<style type="text/css">
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url("0527blue.jpg");
padding: 0;
margin: 0px;
overflow:hidden;
border: 0px;
}

而将顶级元素改为如下代码时,则可以去掉边框和滚动条,只是图标显示不正常,明显小许多.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

请问,如何才能达到即去掉边框和滚动条,而又不会让图标变得如此之小?

废话不多说，今天要做一个功能，使用了WebBrowser控件，和大多数人一样，我想去掉控件本身的边框，因为这个3D边框很丑陋而且和背景不相容。

找了一圈，发现网上的方法都是针对没有Frameset的情况，也就是说，你的页面如果有Frameset构成，则使用css：

body
{
/*下面2句去掉webBrowser边框*/
border:0px;
overflow:hidden;
}

是不够的，边框仍然存在。

我的代码原来是

代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <link href="style.css" rel="stylesheet" type="text/css"/>
6 <title></title>
7 </head>
8 <frameset framespacing="0" frameboder="no" rows="44px,*">
9
10 <frame id="frameNav" scrolling="no" name="frameNav" src="navigation.html" border="none" frameborder="no" noResize="true"></frame>
11<frame id="frameContent"scrolling="no" name="frameContent" src="01-Content.html" border="none" frameborder="no" noResize="true"></frame>
12</frameset>
13
14</html>

后来改为：

代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="style.css" rel="stylesheet" type="text/css"/>
6<title></title>
7</head>
8<body>
9<iframe id="frameNav" frameborder="0" name="frameNav" height="44px" scrolling="no" width="699px" src="navigation.html"></iframe>
10<iframe id="frameContent" frameborder="0" name="frameContent" height="456px" scrolling="no" width="699px" src="01-Content.html"></iframe>
11</body>
12
13
14</html>
用iframe来替代frameset，测试发现边框去掉了。

哪位达人知道不改html代码怎么实现，希望不吝赐教，thanks~

liuyineng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中嵌套去边框方法

E webbrowser 网页嵌套去掉边框隐藏滚动条前一段时间升级了一个程序，将程序的主界面用网页来设计，效果非常好，用 HTML+CSS 可以实现更加丰富的界面效果，比直接用 Delphi 来得容易。　　实现的方法很简单，在窗体添加一个 WebBrowser 组件，然后执行以下代码：　　WebBrowser1.Navigate('D:\Soft\HomePage.htm...
复制链接

扫一扫