浏览器的字体重叠了怎么办?

浏览器的字体重叠了怎么办?,第1张

打开网页字体重叠的解决方法(以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,如果还不行 重新启动一下 希望对您有所帮助!~

欢迎分享,转载请注明来源:品搜搜测评网

原文地址:https://pinsoso.cn/shuma/759000.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-08-05
下一篇2023-08-05

随机推荐

  • 水乳精华的使用顺序

    1、爽肤水。使用爽肤水不仅可以为皮肤补水,在充分水合的条件下,有效成分在角质层中的渗透速率也会明显提升,帮助唤醒肌肤,为下一步使用精华液做好准备,同样对后续营养成分丰富的护肤品吸收更有利。2、精华液。爽肤水用完后,就可以涂抹精华液。需要注意

    2024-04-15
    25500
  • 娇韵诗清爽控油脂精华露好用吗?

    对于脸部肌肤油脂分泌旺盛的妹纸们来说,肌肤也更容易出现一些常见的问题,油脂会影响人的外貌形象,导致脸上长痘痘,肌肤暗沉,毛孔粗大等问题,所以油皮的妹纸可以使用这款娇韵诗清爽控油脂精华露产品哦!娇韵诗清爽控油脂精华露好用吗?1、产品介绍娇韵诗

    2024-04-15
    26600
  • 精华霜和精华液有什么区别?

    精华霜和精华液的区别:1、精华霜精华霜是这几种精华质地中为数不多固定类的精华,水分和油分都比较充足,但并没有因此显得厚重,相反精华霜的质地是几种精华中最为温和的一种。涂抹在脸上即可化成水,非常温和不会刺激皮肤。挑选建议:精华霜温和无刺激,适

    2024-04-15
    25100
  • 妮维雅洗面奶真假辨别_妮维雅男士洗面奶真假鉴别

    妮维雅洗面奶产品因为其销量还是非常不错的,同时用户的评价也是也一直处于高星,所以假货也无可避免的就出现在大家的视野之中,下面我们就来看看关于妮维雅洗面奶真假对比。妮维雅洗面奶真假辨别从包装的印刷上看:这方面区分最大的就是产品的背面,

    2024-04-15
    9300
  • 烟斗有什么配件?

    烟斗包x0d压棒、烟刀、清烟灰的针(一般是连在一起的三件套或者两件套)x0d斜火打火机普通打火机火柴x0d通条(也清理烟灰用的)x0d滤芯(3mm 6mm 9mm规格的多见)x0d保养石楠木烟斗的蜡块(没感觉有什么必

    2024-04-15
    10500
  • 妮维维和妮维雅有什么区别吗

    妮维维和妮维雅是两个不同的品牌。妮维雅(Nivea)中文曾译为能维雅。来自德国的护肤品牌妮维雅(Nivea)是拜尔斯道夫公司BeiersdorfAG(简称BDF)所有,妮维维是中国的一个小型化妆品品牌。关于妮维雅美白身体乳液,瓶身上全是英文

    2024-04-15
    11600
  • sk2清莹露和神仙水有什么区别

    sk2清莹露和神仙水的区别有:质地不同:skll神仙水是精华水,水状质地,不粘稠,适合油性和混油型肌肤,可以淡化黑斑。清莹露属于清洁水,水润质地,能够补水和清洁皮肤。成分不同:神仙水以半乳糖酵母菌发酵物滤液为核心成分,添加丁二醇等保湿成分外

    2024-04-15
    11900

发表评论

登录后才能评论
保存