不同浏览器的默认padding系数问题

最新推荐文章于 2023-06-01 10:13:13 发布
最新推荐文章于 2023-06-01 10:13:13 发布
阅读量723 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drawback12138/article/details/89381642
版权

今天写一个html/css页面时候，设置ul大小为（width: 180px;
height:180px;）可是到浏览器中老是变成220X180px，导致后续ul的子元素页面排列老师出问题，后面打开浏览器审查元素一看，原来是360浏览器的默认系数原因在这里插入图片描述
如图，有一行（-webkit-padding-start: 40px;）这就导致ul的大小变成了220X180px啦，解决办法是在ul的css属性中改为（-webkit-padding-start: 0px;）像这样
.selector ul{ position: absolute; top:-20px; left: -20px; width: 180px; height:180px; -webkit-padding-start: 0px; }问题就解决了

周某江12138
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6大主流浏览器中，各个html标签默认的padding和maring
weixin_33725239的博客
11-17 606
这篇资料列举了6大主流浏览器中，各个html标签默认的padding和maring。单位是px【Firefox;Chorme;Safari;Opera;Maxthon;IE6,7,8】 一:h1~h6标签 有默认margin（top,bottom且相同）值，没有默认padding值。 在chrome中：16,15,14,16,17,19; 在firefox中：16,15,14,16,17,20; ...
重置浏览器默认样式
12-02
不同的浏览器对CSS的兼容问题在学习及运用过程中占到了绝大部分。作为一个闭门造车的学鸟~偶是一路google+baidu过来的，虽然到现在还是鸟~但还是要慢慢总结。 为了尽可能从开始就减少问题的产生，鸟们需要在开始写CSS的时候就把各个不同的浏览器样式重置到一个样子~以减少后面打补丁的数量和降低问题产生的可能性。要知道，有时候分析问题产生的根源比解决问题所花费的时间要多的多得多。关于如何快速定位页面中复杂的css bug 的问题，请参阅怿飞的这篇文章 不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}； 不过现在说
网页开发基础
qq_64505257的博客
06-01 2426
网页开发基础
-webkit-padding-start: 40px;ul的padding-left:40px;问题
12-26 5313
今天在仿本站搭一个SSM博客的时候，在写 HTML/CSS 的时候，遇到一个问题。 如图，左边有 40px 的空隙 然后审查元素，查看一下，真相出来了。md，竟然是浏览器的原因。 解决办法，添加一行 * {    padding：0；    margin：0；} 但是，这个貌似比较占资源，我们可以换用下面这段代码 body, div, dl,
关于<ul></ul>标签 -webkit-padding-start: 40px;兼容性问题
kakamonster的博客
05-17 2196
这是ul部分CSS代码：.nav ul{ list-style-type:none; width:200px; height:30px; }css代码部分没有任何问题这是html代码： &lt;div class="nav"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/li&gt; &lt;li&gt;博客&lt;/li&amp
ul的padding-left:40px问题
wxlkeepmoving的专栏
05-01 9916
一个简单的列表，在IE和FF中居然出现了两种不同的表现（在FF中ul会产生padding-left:40px的效果），开始的时候以为可能哪里写错了，找了N久，突然想起来这种情况是各浏览器对HTML元素默认样式设置不同所产生的。 Firefox的默认样式里面关于ul和ol的定义：ul, menu, dir { display: block; list-style-type: disc;
webkit webApp 开发技术要点总结
caibinghong的专栏
08-31 619
webkit webApp 开发技术要点总结 1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width -      ...
java webkit.jar内核_Webkit内核的浏览器默认CSS属性
weixin_29958569的博客
02-24 369
/** The default style sheet used to render HTML.** Copyright (C) 2000 Lars Knoll ([email protected])* Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008 Apple Inc. All rights reserved.** This library is fre...
Webkit内核的浏览器默认CSS属性
球er的工匠区
05-16 2572
/* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll ([email protected]) * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008 Apple Inc. All rights reserved. * * This li
各浏览器padding、margin的差异
10-31
各浏览器padding、margin的差异
CSS样式表教程：浏览器默认样式
12-10
不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}； 不过现在说的可不只是这些。基本上，不同内核的两个浏览器在某些元素的表现都会存在差异，比如缩进的大小...
浏览器默认样式
01-19
padding:0;}一刀切的做法为什么不提倡 三、网上广泛流传的CSSreset为什么也有人不提倡 从对比图可以看出，不部分标签其实是没有margin或者padding的。其中又有些标签一般是很少用到的，就算用到了，一般也会特殊...
前端习题之简易新浪导航栏
weixin_47481936的博客
11-08 618
简易新浪导航栏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .nav{ height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; b
深入理解 padding
p1967914901的博客
06-22 4587
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性，本文我们的主角是 padding box。 指盒子的内补间。“补间”这个词比较术语化，我们不妨将其理解为快递盒子内快递商品外包裹的那层起保护作用的海绵。只是在 CSS 中，这个“海绵”默认是透明的。因为 CSS 中默认的 是 ，所以使用 会增加元素的尺寸。例如： 如果不考虑其他 CSS 干扰，此时 元素所占据的宽度就应该是 120 像素（80px
进入页面先刷新一次_还在手动刷新离线网页？这个方法让你坐等网络恢复
weixin_39672160的博客
12-05 202
我们在使用 Chrome 时，如果遇到断网的情况，喜闻乐见的小恐龙页面就会出现。除了玩一玩小恐龙的游戏，你能做的只有等待网络的恢复。Chrome 中有一项默认关闭的选项，殊不知，如果这时网络恢复，你可能还在沉迷小恐龙游戏而不自知。如何操作能让网页自动加载？一次性将所有离线网页全部加载出来？这篇有轻功便告诉你。你可以在 Chrome 浏览器的地址栏输入 chrome://flags，这时你会进入到下...
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1566
自适应布局webkit-box的用法
常见浏览器兼容性问题及解决方案
qq_42221363的博客
11-10 567
常见浏览器内核 市场上浏览器种类很多，不同浏览器对网页的解析存在一定差异。浏览器内核主要分为两种，一是渲染引擎，另一个是JS引擎，这边所说的内核更倾向于渲染引擎。 常见的浏览器内核有：Trident、Gecko、Blink、Webkit IE浏览器：Trident Chrome浏览器：Webkit(<28)，Blink(>=28) Firefox浏览器：Gecko Safari浏览器：Webkit Opera浏览器：Blink 360浏览器：Trident+Webkit双内核 QQ浏览器：Tr
node.js用dgram接收udp信号进行解析，并用websocket发送到浏览器前台
drawback12138的博客
04-30 3517
最近在做一个实验，接收udp信号发送过来的卫星航迹数据，在后台解算出它的航迹数据，然后将航迹数据发送到浏览器前端，将卫星的航迹图在浏览器前端可视化出来。 一、接收udp信号数据，在后台对原始数据解析解算 上图看到的是是一个udp信号发送模拟器，它发送的是卫星的航迹数据，发送端是在本机的6001端口，接收客户端是在本机的6000端口。（即发送器将udp信号数据从6001端口发送到6000端口） 在...
不同浏览器的标签默认的 margin 和padding
最新发布
09-19
不同浏览器的标签在默认情况下具有不同的 margin 和 padding 值。 在大多数情况下，不同浏览器的标签都具有一些默认的 margin 和 padding 值。这些值是由浏览器制造商根据自身设计和风格决定的。 例如，对于 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值