Text contained in box shows up with top padding in browser, but not in fiddle
I have been witnessing this weird behavior since last night.
Here's the fiddle: http://jsfiddle.net/Gqndm/
and here is a screenshot of what I get in all the major browsers on my machine: http://i.stack.imgur开发者_如何转开发.com/Bl3ve.png
Any idea as to why the text appears to be pushed down in the box (e.g. not being at the very top of the box, like in the fiddle).
Thanks for your help
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.
精彩评论