首页 > 主机硬件 > 服务器 > User Agent Stylesheet异常怎么处理-浏览器问题

User Agent Stylesheet异常怎么处理-浏览器问题

服务器admin2023-02-28 07:55:20A+A-

大家通常看到一个没有带任何CSS样式文件的HTML却带有不错的样式,这是由于在W3C的HTML标准里,一些HTML标签自带一些CSS样式。

不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。

流浪起

不同的浏览器实现的User Agent Stylesheet不一,但大部分都能遵循W3C的标准。

个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯,例如p前后都有1em的外边距等。

在chrome里的User Agent Stylesheet如下图所示。

css中margin-top是设置容器的外间距了距离了,div嵌套后,margin-top或者margin-bottom失效了,在网上打到下面的方法可以解决。

设计页面的时候遇到一个神奇的问题,下面是html的代码

此时我设置子容器homeCategory的样式:

.homeCategory{

  margin-top:30px;

}

发现margin相对的父容器搞错了,找到body去了,成了相对于body来设置margin,此时设置了homeNav 的高度和宽度都没效果,让我抓狂不已,div都不听话了,调试了半天终于找到了原因。

原因:

在两个嵌套的div,如果外层div的父容器padding值为0,

那么内层div的margin-top或者margin-bottom的值会”转移”给外层div,也就是父容器的父容器。

解决办法:

1:设置父容器的的样式加上:overflow:hidden。

2:把对父容器的margin-top外边距改成padding-top内边距。

3:给父容器div加样式, padding-top: 1px。

4:给父容器div加样式,position: absolute。

5:把父元素变成一个 block formating context ,下面是可选的方法

a、float: left/right

b、position: absolute

c、display: inline-block/table-cell

d、overflow: hidden/auto

建议使用方法1。


点击这里复制本文地址 以上内容由木准科技整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

相关内容

0条评论

支持Ctrl+Enter提交

木准科技 © All Rights Reserved.  
Powered by 木准科技 粤ICP备2022104150号 互联网宗教信息服务许可证
IP地址| 工商服务| 仪器设备| 办理icp许可证公司

qrcode
在线客服
服务热线

服务热线

18300003210

微信咨询
木准科技
返回顶部
X木准科技

截屏,微信识别二维码

微信号:WX8888

(点击微信号复制,添加好友)

  打开微信

微信号已复制,请打开微信添加咨询详情!