在我读过的一些文章中,* {margin:0; padding:0;}不鼓励使用它,因为它会影响网站的性能.所以我转向了reset.css样式表.
但我想知道,它如何影响性能？
我打算使用Eric Meyer的CSS重置,但我偶然发现了一些跨浏览器的差异(如input边距).基于此,我提出了一个更激进的方法:
(这已经过时了.不要忘记在这个问题的最后检查当前的修订版本,并按照你的意愿批评它)
/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
:before, :after {
content: '';
}
:link, :visited, :hover, :active { …我经常使用盒子大小:边框盒子; 在创建CSS文件时的所有元素,即
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
但是我似乎无法使用'Normalize.css'文件(https://github.com/necolas/normalize.css)
我已经尝试将上面的代码添加到我自己的CSS文件的顶部,在normalize本身内,但是都没有成功
我非常想使用normalize.css,因为它没有像其他一些CSS重置文件那样激烈,但我如何让它接受box-sizing:border-box; 这样它会影响所有元素并且是跨浏览器友好的吗？
这是我的HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hover Zoom</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" >
</head>
<body>
</body>
</html>
这是我的CSS文件代码(style.css):
body {
background-color: #FF0000;
}
但背景颜色body不会改变.
没有CSS重置,它工作正常.你能给我一个更好的CSS重置或任何其他解决方案吗？
我是CSS的新手,所以有一个简单的问题.
这是我的脚本=>
<!DOCTYPE html>
<html>
<head>
<title>Default</title>
<meta charset="UTF-8">
<style type="text/css">
body,div,html,img
{
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div>
<img src="/project/pics/5.jpg" width="240" height="200">
<img src="/project/pics/10.jpg" width="240" height="200">
<img src="/project/pics/10.jpg" width="240" height="200">
</div>
</body>
</html>
所以我的问题是,尽管图像之间的CSS重置是空格,这当然会在样式布局后引起一些问题,所以任何人都知道如何解决,如何重置CSS,图像之间没有任何空格,谢谢......
我猜对了lol,它真的很简单,只需要写成一行,否则必须声明为font-size:0;
谢谢所有:))
我已经使用从头开始制作的CSS制作了一个网站.
随机地在两个地方有不需要的空格:
我已经尝试了各种修复问题的方法,如边距和填充,但它们似乎没有用.
我该怎么做才能摆脱这些白色区域？
首先,我想告诉你为什么我问这个问题.我通常更新写得不好而没有重置的项目.我想提高项目的质量,所以似乎应用CSS重置是绝对必要的.
每次我改变一些东西时,我不想在每个浏览器中做一个像素完美测试的艰苦工作,我不想完全重写所有CSS.
所以:
当我写作时:
*{
margin:0;
padding:0;
border:0;
}
我知道会遇到什么麻烦:<p>松散的衬垫<input>, <select>, etc. 会松动衬垫和边框.所以我必须手动指定它们.
这段代码更难理解:
*{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
而我完全对此感到困惑:
body {
line-height: 1;
}
我正在将Ext 3.x中的现有应用程序更新为4,并且我已设法启用Ext的scoped reset CSS选项以防止Ext将CSS重置应用于我的整个应用程序,但是我现在遇到另一个问题.我的应用程序使用了很多硬编码的,非ext生成的HTML和CSS样式,其中大部分包含在Ext组件(面板,tabpanels等)中.显然,由于这个html是ext组件包含元素的后代,它继承了CSS重置样式.结果,完全提升了非Ext html的自定义样式.
具体来说,有两个CSS规则导致了这些问题:
.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php]
这个属性不是什么大问题,我所要做的就是创建我自己的重置包装类,它将box-sizing改回'content-box'并将该类应用于我自定义html中最顶层的包装元素.该规则如下:
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
然而,其他CSS规则是不容易否定的:
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, …我有一个HTML5画布图像,我绘制了一些点,我想在点旁边对齐一些div标签和文本输入标签.
不幸的是,浏览器不同意每个div和输入标签之间的空间.
通过使用CSS指定高度,我发现了输入标记的黑客攻击.现在输入标签在每个浏览器之间具有相同的空间.根据浏览器的不同,输入标签的默认高度似乎不一样,非常非常奇怪.
我为我的div标签尝试了同样的事情,但我无法为每个浏览器获得正确的对齐方式.
文本输入标签对齐与每个浏览器一起使用CSS hack:http: //jsfiddle.net/baptx/XcKZj/
div标签对齐方式不同,具体取决于浏览器(为Firefox配置):http: //jsfiddle.net/baptx/92gPY/
我在Linux上使用Firefox,我注意到Windows版本没有渲染相同的边距.在Linux或Windows上运行时,Chrome也不同意Linux Firefox.Opera很棒,它总是与在Linux或Windows上运行的Linux Firefox一致.
我首先想到的是,这是由于网页浏览器引擎,Gecko渲染与Webkit相比有所不同,但如果Windows和Linux版本的Firefox不同意,那应该是别的了.
有没有人和想法来自哪里以及如何使用div标签解决这个问题？