当前位置：文江博客话题详情

框中包含的文本在浏览器中显示为顶部填充，但不在小提琴中显示

发布于 2024-11-03 01:26:09 字数 316 浏览 0 评论 0原文

从昨晚起我就一直目睹这种奇怪的行为。

这是小提琴： http://jsfiddle.net/Gqndm/

这是我得到的屏幕截图我机器上的所有主要浏览器： https://i.sstatic.net/Bl3ve.png

关于文本出现原因的任何想法在盒子中被向下推（例如，不像在小提琴中那样位于盒子的最顶部）。

感谢您的帮助

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱的故事 2024-11-10 01:26:09

jsFiddle 导入一个名为 normalize.css 的 CSS 文件，其中包含以下内容CSS...

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

如您所见，p 和 div 元素的 margin 和 padding 设置为 0。

这有效地规范了所有浏览器的默认样式表。如果您在其他浏览器测试中包含此 CSS，毫无疑问您会看到与 jsFiddle 中相同的 CSS。

jsFiddle imports a CSS file called normalize.css with the following CSS...

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

As you can see, p and div elements have their margin and padding set to 0.

This effectively normalises all browser's default stylesheets. If you included this CSS in your other browser tests, no doubt you will see the same that is in jsFiddle.

回复收藏 0 原文

~没有更多了~