打开网页字体重叠的解决方法(以360极速浏览器为例):
以下图为例:”我要提问“和”我的帐号“字体重叠了。
点浏览器底部右下角的”缩放“图标,然后鼠标点滑块向左移动,并且勾选”缩放比例对所有页面生效“。
效果如下:
我们常常在做网页的时候发现一个问题,那就是DIV覆盖了DIV,这样就出现了DIV的盒子重叠覆盖导致内容没有出现这么一个问题,那么我们今天就来给大家介绍一下产生原因以及解决方法。
可能您遇到过上下结构的布局,下面DIV内容重叠上面DIV内容上,也可能下面内容覆盖掉上面DIV布局,形成DIV与DIV覆盖重叠现象;您也可能遇到过相邻的两个DIV盒子发生重叠覆盖现象,这些是什么问题如何解决?
接下来通过案例来演示这两种兼容性DIV覆盖重叠现象问题,并解释原因与解决方法。
上下结构DIV盒子覆盖 首先实例HTML代码
<!DOCTYPE html>
<html>
<head>
<title>DIV与DIV覆盖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
boxa,boxb{ margin:0 auto; width:400px;}
boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
boxb{ border:1px solid #000; height:40px; background:#999}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">内容左</div>
<div class="boxa-r">内容右</div>
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>可拷贝代码自己动手发现DIV覆盖现象。
实例代码说明:
设置两个大div盒子分别CSS命名为“boxa”和“boxb”,设置宽度相同均为400px,对“boxb”设置一个黑色边框与高为40px、背景为黑色的;然后在boxa里添加两个一个靠左一个靠右CSS命名分别为“boxa-l”“boxa-r”,两个小盒子,同时设置红色边框、css高为80px、宽度分别为280px和100px。
问题分析
一般想需要将“boxa”和“boxb”布局是上下结构,从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果,但“boxb”这个DIV跑到“boxa”下面去了,但内容没有发生覆盖,只有DIV发生覆盖现象。
这个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动,所以导致“boxa”没有被撑开,而同级的“boxb”盒子与“boxa”紧贴,而“boxa”高度没有,“boxa”的子级浮动的与“boxb”不是同级,“boxb”盒子依然认为“boxa”没有高度,所以导致“boxb”DIV盒子就跑到“boxa”子级DIV盒子下面形成了覆盖重叠现象。
问题解决方法
要么清除浮动,要么设置“boxa”高度,一般情况下文字内容不确定多少 就不能设置固定的高度,所以一般不能设置“boxa”高度(当然能确定内容多高,这种情况下“boxa”是可以设置一个高度即可解决覆盖问题。)。
这里就使用CSS清除浮动方法解决上下结构DIV重叠覆盖问题,清除浮动有两种方法,方法如下。
css clear清除浮动
在“boxa”盒子</div>闭合前加clear样式清除浮动。
完整HTML源代码:
<!DOCTYPE html>
<html>
<head>
<title>DIV与DIV覆盖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
boxa,boxb{ margin:0 auto; width:400px;}
boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
boxb{ border:1px solid #000; height:40px; background:#999}
clear{ clear:both}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">内容左</div>
<div class="boxa-r">内容右</div>
<div class="clear"></div>
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>此方法与上一方法更为简便简单,只需对“boxa”(子级有浮动的父级盒子加overflow:hidden)
CSS DIV实例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>DIV与DIV覆盖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
boxa{ overflow:hidden}
boxa,boxb{ margin:0 auto; width:400px;}
boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
boxb{ border:1px solid #000; height:40px; background:#999}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">内容左</div>
<div class="boxa-r">内容右</div>
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>解决DIV覆盖的问题就这样给大家解决了。更多精彩请关注Gxl网其它相关文章!
相关阅读:
CSS里怎么使用border-radius
HTML的表格样式
html的编辑转换器
你可以分两个步骤来解决!
单击开始,指向程序,指向附件,再指向辅助工具,然后单击辅助功能向导。
单击下一步,然后再次单击下一步。
单击选中“禁用个性化菜单”复选框。
连续单击下一步、下一步、下一步、下一步,然后单击完成。 首先
IE右键-属性-辅助功能-取消所有的对号
如果问题还不能够解决的话请打开开始菜单——控制面板-辅助功能选项--显示-“使用高对比度”
前面的钩去掉!~ 重新启动IE,如果还不行 重新启动一下 希望对您有所帮助!~
欢迎分享,转载请注明来源:品搜搜测评网