学习啦——学设计>网页设计>网站建设>网站后台技术>

CSS浏览器有什么好的方法_CSS浏览器有哪些方法

宇民分享

  很多时候,希望能够在HTML中使用空格排版。但浏览器在解析HTML时,会把连续的空格解析成一个,所以我们会使用等这样的占位符。下面由学习啦小编为大家整理的CSS浏览器的方法,希望大家喜欢!

  CSS浏览器的方法

  1、ont-family:'宋体';将Safari的默认字体设置成“宋体”等中英文等宽的字体,就能解决。Windows版本的Safari字体设置,需要直接使用中文“宋体”这样的名称而不是“Simsun”(了解原因的兄弟请告诉我)。

  但至此,我们的根本目标没有解决,就是能否避免使用这样的占位符,而使用“原生”的空格。考虑针对空白的相应CSS属性,具体了解有关white-space的用法,接下来就比较好处理了。

  总结下使用white-space实现等宽空格的条件,有两个。需要设置对应的属性

  white-space:pre;

  然后设置等宽字符(包括等宽空格)即可。综合起来,就是这样

  font-family:'宋体',Simsun;

  white-space:pre;

  由于使用了中文CSS名称,所以在实际使用中需要考虑样式的字符编码问题。同时,需要额外考虑的是,苹果机是否有“宋体”(或者其他等宽的字体),有苹果机的兄弟请帮忙测试下。

  --Split--

  2、供的另外一个思路,就是使用em单位。1em简单的说,就可以认为是一个字符宽度;同理,.5em就是半个字符。那么,上面的情况就可以使用这样写。

  买宝贝:

  我的淘宝:

  社区:

  对应的CSS应为

  .half-word{width:.5em;}

  .two-word{width:2em;}

  经测试通过。

  --Split--

  针对这上述的两种不同方法,个人认为应当按照实际情况考虑采用。比如第一种方法,虽然依赖具体的等宽字体,但没有添加其他额外的结构,对于以后的维护会更加的方便;第二种方法,则更多的考虑了实际的应用情况(同时也不用依赖具体的等宽字体),但是也添加了额外的结构。

  CSS浏览器清理浮动的方法

  /* 清理浮动 */

  .clearfix:after {

  visibility:hidden;

  display:block;

  font-size:0;

  content:" ";

  clear:both;

  height:0;

  }

  .clearfix {

  zoom:1;

  }

  其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。

  上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在,Nicolas Gallagher 给出了一个更简洁的方案:

  .cf:before, .cf:after {

  content:"";

  display:table;

  }

  .cf:after {

  clear:both;

  }

  .cf {

  zoom:1;

  }

  原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是,隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

  值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context,这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。

  CSS网页布局的方法

  1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

  2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。

  3、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

  临时解决方法:选择符{属性名:B !important;属性名:A}

  4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

  5、li标签前面的图标推荐使用background-image,而不是list-style-image。

  6、IE分不清继承关系和父子关系的差别,全部都是继承关系。

  7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

  8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

  9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  10、与内容无关的图片请使用background