div在谷歌浏览器谷歌浏览器dev

这篇文章给大家聊聊关于div在谷歌浏览器，以及谷歌浏览器dev对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

浏览器兼容性问题,火狐可以,谷歌不可以
css控制div的高度与浏览器的高度相适应
多个div横行排列,并随着浏览器窗口的大小拉伸,是如何实现的
css+div 网页充满整个浏览器窗口
如何控制div+css适应不同的浏览器
怎么在谷歌Chrome浏览器查找html元素中的XPath路径

一、浏览器兼容性问题,火狐可以,谷歌不可以

1、火狐浏览器是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux[2]等。Firefox独立于Windows内核，使用的是非ie核心。因此设置基本不受注册表控制。

2、谷歌浏览器又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面（GUI）。但是目前网上支付还不支持谷歌浏览器。另外有些google服务被国内屏蔽，不能整合使用。

3、所以相对而言，谷歌浏览器的兼容性要差些，低于火狐浏览器。这也就是生活中我们遇到的有些操作火狐可以谷歌却不可以。

二、css控制div的高度与浏览器的高度相适应

1、一、首先创建或打开我们的web项目并创建一个新的html文件和css文

2、二、HTML页面代码如图所示。定义一个div并给出一个id属性。

3、三、使用宽度百分比后，将高度值设置为零，使用padding属性的top或者bottom（可以使用任何百分比），并使用背景色作为测试。

4、四、浏览器运行后，效果如下。如果放大或缩小，宽度和高度将相应更改。

5、五、此方法是使用表达式设置高度。

三、多个div横行排列,并随着浏览器窗口的大小拉伸,是如何实现的

div#container{margin-left: auto; margin-right: auto;}在css中加上这段代码使页面居中给你一个实例<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"" "><html xmlns=" "><head><meta http-equiv="content-type" content="text/html; charset=gb2312"/><title>自适应满屏高度的布局</title><style type="text/css">html{height:100%;max-height:100%;padding:0;margin:0;border:0;background:#fff;font-size:76%;font-family:georgia, palatino linotype, times new roman, serif,"宋体";overflow: hidden;}

html{ scrollbar-face-color:orange; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#c00; scrollbar-3dlight-color:#c00; scrollbar-arrow-color:#000; scrollbar-track-color:#c0c0c0; scrollbar-darkshadow-color:#fff;}body{height:100%;max-height:100%;overflow:hidden;padding:0;margin:0; border:0;}#content{

}*html#content{top:0; left:2%; height:100%; max-height:100%; width:96%; overflow:auto;position:absolute; z-index:3; border-top:100px solid#fff; border-bottom:80px solid#fff;}#head{position:absolute;margin:0;top:0;left:1px;display:block;width:100%;height:90px;background:orange;background-position:0 0; background-repeat:no-repeat;font-size:4em;z-index:5;overflow:hidden;color:#fff;border-bottom:1px#c0c0c0 solid;text-align:center;}

#content p,h2{padding:10px;font-size:12px;color:#fff;}#content p.bold{font-size:1.2em; font-weight:bold;color:red;}#logo{height:75px;line-height:75px;text-align:center;display:block;}</style></head><body><div id="head"><span id="logo">100%高度全屏自适应布局</span></div><div id="content"><h2>此布局惟一的遗憾是在IE6以下浏览器中显示为怪异模式,因为HTML代码的头一句加了一个注释,如果删除后在IE中滚动条高度显示不全.</h2><p class="bold">此布局在以下浏览器中测试通过: IE5.5,IE6,IE7,TT,Opera 9.63,Firefox3.0,谷歌，IE8未作测试。</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></body></html>

四、css+div 网页充满整个浏览器窗口

1、第一步，创建或打开Web项目，新建html文件以及CSS文件，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后，图中显示了HTML页面代码，定义div并给出id属性等级，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，将“height”值设置为零，使用“padding”属性的“top”或“bottom”，同时运用背景色来进行测试，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，效果如下，如果进行放大或进行缩小，则宽度和高度将进行相应的更改，见下图。这样，就解决了这个问题了。

五、如何控制div+css适应不同的浏览器

1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了

2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如

margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;

margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px

3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6 e" Z+ e%|8 G#|

4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)

height:100px;/*FF下显示100的高*/

+height:120px;/*IE678下显示120高*/

5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">

6.再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1.一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-

7.扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。7 L& t- o7 k- a1 I

background:red;/*FF里显示的红色*/

+background:blue!important;/*IE7下面显示的蓝色*/

+background:green;/*IE6下面显示的绿色*/

在这里，我想说一下，虽然兼容给你带来很多郁闷，让人心烦，但同时，在你做多了后，你会发现，兼容有时候会满足你很多不好达到的效果，就像最后一个，要做那种效果，不用兼容的方法，那你就JS去吧，JS还得想想FF和IE下的不同，当然，JS的兼容，我也不会，我没去研究过。以后的事，先把CSS+DIV学熟再说。

多做，做练，始终把盒子模型放在心中，才会熟练，才会运用自如，才会在做的时候，自然而然就知道哪里会有兼容问题，直接在测试前就解决掉那些最常见的兼容问题。

六、怎么在谷歌Chrome浏览器查找html元素中的XPath路径

谷歌Chrome浏览器是一款功能非常强大的浏览器，无论是在开发者中还是在普通用户群中，Chrome浏览器都非常受欢迎，尤其对于程序开发人员来说，谷歌Chrome浏览器几乎成了必备的工具，通过Chrome浏览器的开发者工具，可以带给我们很多的帮助。

本文就与大家分享，怎么在谷歌Chrome浏览器查找html元素中的XPath路径，该方法能让你更快的获取到所需数据的路径。

具体方法如下：步骤1、首先打开已经安装的谷歌Chrome浏览器，没有安装的小伙伴可以先安装。在Chrome浏览器中打开任意一个网页，或者也可以打开自己保存在本地的html格式的网页文件，如下图：

步骤2、在打开网页的时候，按键盘上的F12键，可以打开开发者工具界面，如下图：

步骤3、找到在网页上需要查找的元素的文字，选中该文字，然后在右侧的开发者工具界面按ctrl+f键，打开搜索界面，在搜索框输入要查找的文字，如下图示例中要查找的文字是“草稿”：

步骤4、在右侧的开发者工具界面，将鼠标放在对应的位置，会在左侧高亮展示相应的html元素，如下图所示：

步骤5、按上个步骤，在开发者工具界面找到与左侧元素对应的，需要查找的元素后，邮件单击开发者工具界面对应的代码，在右键菜单中选择“Copy”--“Copy XPath”，如下图所示：

步骤6、接着在记事本或其他文本编辑器中粘贴在上一步中复制的路径，如：//*[@id=body]/div/ul/li[7]/a

以上就是在谷歌Chrome浏览器查找html元素中的XPath路径的方法。

OK，关于div在谷歌浏览器和谷歌浏览器dev的内容到此结束了，希望对大家有所帮助。

声明：信息资讯网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，版权归原作者东方体育日报所有。若您的权利被侵害，请联系删除。

本文链接：http://www.gdxhedu.com/news/152118.html

div在谷歌浏览器 谷歌浏览器dev