PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下:

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer');
  ]
}

package.json内增加如下示例

"browserslist": [
  "> 1%",
  "last 2 versions"
]

这里我对着官方文档简单说一下数组内的值对应的含义:

  • last 2 versions: 每个浏览器中最新的两个版本。
  • > 5% or >= 5%: 全球浏览器使用率大于5%或大于等于5%(上例中则是1%)。

其他的一些参数简单介绍:

  • ie 6-8: 选择包含ie6-8的版本。
  • Firefox > 20: 火狐版本号大于20。

还有很多不一一列举,这里的配置还是很详细的,一般来说最省事的就是不加参数,按照默认即可。

需要配置的话,就在package.json里面添加browserslist参数,这样其他插件也能够从中获取到项目将要兼容的版本,目前包含以下几个插件会读取改配置:

关于autoprefixer的介绍差不多就这些了~

postcss-partial-import

这个没啥好说的,也是很容易理解的插件,就是让你的css文件支持@import,支持W3C的写法也支持SASS那种写法,这里就不多说啦。

postcss-advanced-variables

同样的,像SASS那样可以自定义变量并进行引用,用法也十分简单,相信大家一定不用点开官方文档也会用的~(你肯定还是点开了哈哈哈~你这叫胡开链接综合症,生怕错过了啥内容。)

cssnano

很显然这个插件作者比较高调,github的cssnano上面是没有什么说明和介绍的,当然官方也写得很详细了。这个插件通俗来讲,就是css代码压缩工具,他的配置建议采用默认配置,除非你知道你在做什么。

当然我在测试使用中遇到了一点点问题,关于cssnano和autoprefixer结合使用,或者说是postcss.config.js插件引入顺序有关的造成输出不同的问题?我暂时还在研究,先看代码:

testcssnano.css

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

postcss.config.js(第一种)

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
    require('autoprefixer')
  ]
}

输出结果:

.test{border-radius:10px;display:flex}

postcss.config.js(第二种)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    })
  ]
}

输出结果:

.test{border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex}

问题一,如果手写-moz-,cssnano会清除,可见示例,当然或许这个属性在火狐已经支持不需前缀所以,就被去掉了。

问题二,如果在配置文件中,cssnano在autoprefixer之前引用,假设根据webpack的loader执行顺序规则相同的话,大概postcss.config.js中的插件也是这样由下而上依次执行,因此,在第一种例子中,css代码先被autoprefixer处理,然后再执行cssnano清除了那些多余的前缀代码?大致可分解为:

第一步autoprefixer处理结果:

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
}

第二步cssnano处理结果:

.test{border-radius:10px;display:flex}

可是我要遗憾的告诉大家。。。这个可能是错误的结论!!!

因为我将第一步的结果作为初始css,将postcss.config.js中仅引用一个cssnano插件来执行的结果如下:

.test{border-radius:10px;display:flex;display:-webkit-box;display:-ms-flexbox}

因此,这个问题就来了。。。cssnano确实将-moz-去掉,但是他并没有处理其他的关于display的兼容代码。

于是我再做了一个测试:

我将css代码改为:

.test {
  -webkit-transform: scale(.5) translate(10, 20);
  -moz-transform: scale(.5) translate(10, 20);
  -ms-transform: scale(.5) translate(10, 20);
  -o-transform: scale(.5) translate(10, 20);
  transform: scale(.5) translate(10, 20);
}

而postcss.config.js还是同时引入cssnano和autoprefixer,经过测试,无论谁先谁后输出结果均为:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

如果css代码改为:

.test {
  transform: scale(.5) translate(10, 20);
}

postcss.config.js同时引入cssnano和autoprefixer,

第一种cssnano在前结果:

.test{transform:scale(.5) translate(10,20)}

第二种autoprefixer在前结果:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

结果又不一样,不知道看到这里大家晕了没有。

根据观察,postcss.config.js的插件执行顺序是有要求的,至少在同时使用cssnano和autoprefixer的时候,cssnano一定要在autoprefixer之后,否则autoprefixer可能会失效!

另外cssnano和autoprefixer都会对很旧的兼容写法进行精简,例如上文有一段有很多个transform属性的css代码,autoprefixer会(根据browserslist)剔除其他的。

至于顺序问题,我后面继续进行研究!

postcss-px2rem

做移动端,适配是个头疼的问题,不过我目前还是使用想对稳定的方案flexible,那么就需要用rem来做主要的单位,这里不说适配问题只说这个插件,一般移动端,设计师给的设计稿都是750px宽,你只需要下面这样设置,就可以直接在代码里面写你在PSD量的像素值了,这真是太令人激动了!

require('postcss-px2rem')({
  remUnit: 75,
  threeVersion: true
})

因为这个postcss-px2rem又是来源于px2rem的,所以详细的说明见px2rem,我这里写了两个参数,一个remUnit,这个对应的是每rem对应的px值,既然750px,就写75啦,不知道这样理解对不对。另一个threeVersion则对应三个不同dpr下的大小,这个比较少用,需要注意的是处理这些参数,是否转换rem都和注释有关,这里就不细说了,看看文档就好~当然这里也埋下一个坑,等下会提到。

precss

这就是个大杂烩,主要是为了满足SASS开发者的习惯,继承了很多插件,本篇前后文都有提及precss内的部分插件,如果并不是全部用到,我建议还是一个个手动安装所需插件来进行配置,这东西,配好了以后也就不会经常改动了,而且个人认为用大杂烩很容易出现一些坑,又很难排查,例如下面两个插件,大家仔细看看。

另外还有几个插件,建议安装(当然如果你完全不知道干啥的可以忽略):

  1. postcss-mixins 一个和SASS的mixins用法相同的插件
  2. postcss-atroot 让你的嵌套css处于根部,官方有个bar.css的@import的例子很棒,可以看看举一反三
  3. postcss-extend 有相同结构却有那么一点点不同的区别,用这个可以方便的统一管理相同部分样式代码

其他的一些我个人觉得不常用或者说实用意义不大所以就没有写出来了。

postcss-nestingpostcss-nested

这两个也是从precss里面拿出来的,就是仿SASS的嵌套css写法用。为啥把这两个放一起写,因为他们长的太像了。只看名字鬼知道他们的区别,然而他们都被加入到precss里面去了。据precss介绍,他们两个的区别是:

光看这两行我是看不懂到底是个啥玩意,难道第一个是符合W3C规范的嵌套选择?粗略看了下两个插件的说明文档,没看出没啥区别。行,那手动写代码来一个个试试。先安装postcss-nesting,编译试试,哗嚓一片红。。。咋回事,我们先看看代码片段。

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

看似SASS写法没有任何问题。可是它提示的报错信息让人看不大懂

ERROR in ./src/style/index.css
Module build failed: ModuleBuildError: Module build failed: Error: undefined:783:6: property missing ':'
    at error (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:62:15)
    at declaration (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:223:33)
    at declarations (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:252:19)

啥玩意missing了个冒号嘛。。。改来改去都不对。索性拿来官方的实例。才看清楚。原来每个嵌套的样式前面都需要一个&(注意符号后面有个空格),实际上应该如下才对:

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  & li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    & .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    & .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

这里面有一段用到伪类其中&符号后面是没有空格的,是正确的。编译后的结果:

.catis-list {
  padding: 0 0.666667rem;
  overflow: hidden;
}
​
.catis-list li {
  list-style: none;
  float: left;
  margin-top: 0.506667rem;
  width: 1.506667rem;
}
​
.catis-list li:not(:nth-child(4n)) {
  margin-right: 0.88rem;
}
​
.catis-list li .iconfont {
  font-size: 1.333333rem;
  line-height: 1.333333rem;
  color: #506071;
  display: block;
  text-align: center;
}
​
.catis-list li .cati-name {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  display: block;
  color: #999;
  text-align: center;
}

那么这样就没有问题了。和官方的说明的是一样的,但是另一方面,如果每次都要写&加空格,那岂不是很麻烦,习惯写SASS的兄弟们肯定不愿意这样做啦。

那么我要说的就是另一个插件postcss-nested,如precss所述,这个的确是SASS-LIKE了。当然我暂时还不太明白为何precss要收入两个nest插件(为了满足不同开发人员的习惯?)。我们修改postcss.config.js使用postcss-nested,并重新修改样式代码之前第一段,再次编译执行,一切OK,那么结论就是,如果仅习惯于SASS的嵌套写法,安装postcss-nested插件即可~

坑( ఠൠఠ )ノ

  1. 最后来说说我遇到的坑,除了刚才说的cssnano和autoprefixer同时使用需要注意顺序问题。还有另一个顺序研究,就是确定好将要使用的插件后,在postcss.config.js中配置插件require顺序还是有讲究的,这里我个人观察的确还是从上往下的(至于是不是每个插件轮流处理完文件后挨个执行我尚不确定),比如说,postcss-partial-import这个理应是第一个引入的,你若是把它放在最后面,而css代码中第一行就用了@import那肯定会报错!所以,建议根据css代码的写法来决定你的执行顺序。
  2. postcss-nested插件是大部分SASS开发者所喜爱的,但是你在css文件中用sass写法会遇到以下几个问题:
    1. csslint,css文件不支持嵌套,变量等写法,如果你将文件模式改为sass,注释的方式会变成//,而非/* comments */,当然你可以手写/* ... */这样的注释,但是用快捷键进行注释会很痛苦。

      这里有个小技巧,让项目所有css文件均为sass模式下编辑,在项目settings.json添加:

      "files.associations": {
        "*.css": "scss"
      }

      当然你若是想要支持//注释也是可以的,请再安装postcss-scss插件,我这里不多说这个了,因为我已经决定手写注释了😭

    2. 你手写注释没有问题,然而编译出来的东西会出问题,你样式中最后一行如果将注释写在花括号内部,它转换出来的代码,注释会在外部,这是个大坑,因为在使用postcss-px2rem的时候,那注释来控制是否转换的功能就失效了。我文字描述可能让人迷糊,所以看看代码:

      例如CSS部分代码:

      .test {
        color:#999;
        border:1px solid #ddd; /* no */
        .inner {
          color:#333;
        }
      }

      转换后:

      .test {
        color:#999;
        border:0.13333rem solid #ddd;
      }
      /* no */
      .test .inner {
        color:#333;
      }

      而不是我想要的:

      .test {
        color:#999;
        border:1px solid #ddd;
      }
      .test .inner {
        color:#333;
      }

      理论上是应该输出我想要的结果,却没有输出正确,错误的将1px的border转成rem,原因就是先执行的postcss-nested将注释弄在外部后,postcss-px2rem无法识别到它的规则了。

      我一开始也是装了precss后发现该问题,后来查了很久才发现是这个插件的问题。同时也发现了这个人其实已经提过issue了Wrong location of comment of the last declaration in a nested rule definition只是没人解决。

      而我临时处理的方法就是只好将要注释的那段代码不要写在最后一行了。如下:

      .test {
        border:1px solid #ddd; /* no */
        color:#999;
        .inner {
          color:#333;
        }
      }

      可能有时候并不会有两个样式给border垫底,如果只有一行border的样式,就只能这样:

      .test {
        .inner {
          color:#333;
        }
        border:1px solid #ddd; /* no */
      }

      这样倒是可以了,不过看起来很奇怪,所以如果你使用和我相同的处理方式时,务必注意此点(写完本文时我似乎发现了更好的解决方案,等确认了没有问题后,放在下一期来写~)。

(我记得好像还有坑的,硬是想了半天想不起来了。。。那就先这样吧)

本期结语

最后如果你还想探索更多好玩的好用的插件,你可以看看这里PostCSS Plugins List还有这个可以搜索的分类插件列表,如果你发现了更棒的插件,也欢迎留言喔~另外上面的例子如果我没有写的很明白,或者你只是想直接拿来快速测试使用的话,可以看看这个mobileweb

(关于第三期PostCSS的内容还在考虑。。。可能是对第二期的补充和填坑~敬请期待🙃)

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl

魅族手机MX2原生浏览器字体大小问题

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,

都知道魅族的手机很坑了,我就不多说了.

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,如果你的魅族手机有遇到类似问题,可以试试这个demo测试一下,顺便看下源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meizu mx2 stock browser bug with font size style</title>
<style type="text/css">
* {margin:0;padding:0;}
body * {/*height:150px;*/display: block;}
</style>
</head>
<body>
    <h1 style="font-size:60px;">h1 tag with a font-size 60px style!</h1>
    <p style="font-size:60px;">p tag with a font-size 60px style!</p>
    <span style="font-size:60px;">span tag with a font-size 60px style!</span>
    <strong style="font-size:60px;">strong tag with a font-size 60px style!</strong>
    <a href="#" style="font-size:60px;">a tag with a font-size 60px style!</a>
</body>
</html>

从这个代码中可以看出,所有元素应该都是60px字体大小.

但是又可以发现a标签的字体大小是比以上字体大,实际上a才是60px大小,而其他元素的字体大小则是一个默认值.为什么会这样,请问魅族开发人员!

我发现了一个现象,上面把高度给注释去掉了,也就是”hack”后,则字体大小显示正常,均保持了60px,见demo2…这是什么原因.

鬼才知道!

因此我们一致认为魅族原生浏览器坑爹.我不记得web标准是需要给设定了字体大小的元素加高度的吧…

通过CSS3制作页面折角箭头的方法总结

最近在做wap方面工作,对html5和css3的相关知识又学习了些许,近期对于这种箭头” > “的CSS3制作方法进行了简单的总结,如果以后有想到其他更好的,也会不间断更新.闲话少说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 arrow test demo by whidy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
body {font-family:"Microsoft YaHei";}
h3 {line-height:2;border-bottom:1px dashed #aaa;}
.updated-time {font-size:14px;color:#999;}
i {font-style:normal;}
div {position:relative;}
div p {padding-top:50px;}
.arrow-1::after {-webkit-transform:rotate(45deg);border-color:#666;border-width:1px 1px 0 0;height:8px;left:0px;top:0px;width:8px;border-image:none;border-style:solid;content:" ";position:absolute;}
.arrow-2 {display:inline-block;position:relative;vertical-align:top;}
.arrow-2::before,.arrow-2::after {content:"";font-size:0;width:0;height:0;line-height:0;overflow:hidden;display:inline-block;position:absolute;top:0;border:0 dashed transparent;border-left-style:solid;border-width:7px;}
.arrow-2::before {border-left-color:#666;left:0;}
.arrow-2::after {border-left-color:#fff;left:-2px;}
.arrow-3 {-webkit-transform:rotate(45deg);width:12px;height:12px;-webkit-box-shadow:2px -2px 0px -1px #000;background-color:#fff;display:block;}
.arrow-4 {font-family:-webkit-pictograph;transform:scale(1,2);display:block;}
.arrow-5 {-webkit-transform:rotate(-90deg) scale(1,0.5);font-family:cursive;font-size:24px;display:inline-block;}
</style>
</head>
<body>
<h3>这是一个通过CSS3各种方式来测试箭头的DEMO</h3>
<div>
    <i class="arrow-1"></i>
    <p>通过写上边框和右边框形成的角度进行旋转,代码简单</p>
</div>

<div>
    <i class="arrow-2"></i>
    <p>通过两个三角形叠加形成一个箭头,代码较多,需考虑背景色</p>
</div>

<div>
    <i class="arrow-3"></i>
    <p>通过旋转一个白色正方形,并给他阴影产生的效果(似乎android 2.x不支持模糊距离为0的情况.所以虽然效果也不错,不过依情况适用)</p>
</div>

<div>
    <i class="arrow-4"> > </i>
    <p>通过字体设置为<em>-webkit-pictograph</em>并进行缩放产生的效果,兼容性较差</p>
</div>

<div>
    <i class="arrow-5">V</i>
    <p><del>这个实际上也是通过字体(cursive)控制,字母V通过旋转和变形,我觉得可能不好用,适合卡通版箭头吧...</del>(有的移动端没这个字体或浏览器支持不好,PC端兼容性较差 2014年10月22日)</p>
</div>

<p class="notes">参考网站:<strong>http://www.w3cplus.com/content/css3-transform</strong></p>
<p class="updated-time">更新日期:2014年10月31日</p>
</body>
</html>

上面也对各种制作方法进行了简单说明,大家也可以打开查看DEMO页面

CSS的通配符*内不能用display属性?

本来是想简单的reset一下,并且做测试,希望所有元素都为块级元素,于是给*加了个display:block属性值结果发现居然就无法正常解析style了…想去搜一下是怎么回事呢,却找不到,本想多测试几个属性,试试这个通配符是否还有其他属性无法使用,结果也没试出来,就此抛下疑问?难道不能这样写

<!DOCTYPE html>
<html>
<head>
<title>css * cannot use display property</title>
</head>
<style type="text/css">
* {display: block;border: 1px solid #f00;padding: 10px;margin-bottom: 10px;}
body {background-color: #fc0;}
</style>
<body>
<p>body with background color but styles come out too! we dont want this happen!</p>
<span>you can also try it yourself :)</span>
<img src="#" width="300" height="300" />
<a href="#">all blocks now?!</a>
</body>
</html>

而,假设这样的话,不同浏览器效果更是离谱,这里以IE6,7,8,CHROME,IE11为例.测试结果如图:

通配符有了display属性的结果
通配符有了display属性的结果

暂不提这个IE6连HTML节点也算进去了(注意滚动条边框),就说这个不同浏览器的效果,也值得研究下了.

IE6和IE7在同级相邻元素间边距问题

IE6和IE7一向令网页制作者头痛,虽然有些经验丰富的前端开发人员能快速解决大部分问题,但是有时候,仍然会遇到一些令人疑惑的问题.我在做一个简单效果时,发现有时候及时清浮并不是一件好事,通过触发hasLayout反而出了问题.接下来详细说说这个IE6和IE7的问题.

两个同级的相邻的元素A和B(均为块级元素),当A内部有元素浮动,并且拥有外边距时,B则会贴紧A的最后一个元素,假设B没有清除浮动,则会与A的最后一个元素的左右边距保持边距距离,例如图一:

B没有清浮的情况下,左右边距正常
B没有清浮的情况下,左右边距正常

继续阅读“IE6和IE7在同级相邻元素间边距问题”

子级元素如何覆盖父级元素之边框颜色的遮盖应用

由于昨天重装系统,很多程序还未正确配置好,这篇暂且长话短说,直接上代码.
关于这个需求在网站制作上还是经常遇到的(例如白色边框覆盖其他边框的障眼法),做到全兼容似乎只有这个方法最好,特分享出来.这里坚决不用z-index,更加不用绝对定位!查看DEMO

<!DOCTYPE html>
<html>
<head>
<title>childBox and parentBox overlay relationship</title>
<style type="text/css">
* {margin:0;padding:0;line-height:1.5;font-family:"Microsoft YaHei";}
body {background-color:#eee;}
.container {width:1000px;margin:30px auto;}
.parentBox {width:300px;height:300px;margin:0 auto; border:50px solid #ccc;*overflow:hidden;}
.childBox {width:200px;padding:10px;margin:0 auto;height:250px;border:40px solid #aaa;margin-top:20px;position:relative;}
h3 {font-size:18px;}
p {font-size:14px;margin:10px 0;}
.author {text-align:right;}
</style>
</head>
<body>
 <div class="container">
 <div class="parentBox">
 <div class="childBox">
 <h3>childBox and parentBox</h3>
 <p>The childBox overlay the parentBox, otherwise, it must be compatible widt all IEs</p>
 <p class="author">whidy</p>
 </div>
 </div>
 </div>
</body>
</html>

明天重新整理一下,发一点相关页面应用到这个的地方.

一个小小的双引号引发的思考-XP内IE下的字体(下)

在原版的XP系统下IE 6,IE7,对于自体支持似乎不是特别的好.上次提到过中文字体似乎对于中文标点都不能正常显示出来.更不要提英文字符对汉字的支持了.
正是这个原因上期的背景图解决IE6,7字符替换问题费了很大的功夫.
这次我简要总结一下我所发现的XP下IE6和IE7下字体的一些问题.

其实我之前做网站从未遇到这样的问题,可能是很久以前微软雅黑并未普及吧.就目前来看,网上关于字体的资料太少,国外有却跟汉字毫无关系.我也下了一个可能并不准确的结论:

继续阅读“一个小小的双引号引发的思考-XP内IE下的字体(下)”

关于IE6行内多个元素浮动背景图对宽度影响

遇到这个问题实在是诡异.我对我自己能找出问题的原因也颇感惊讶,因为我根本不知道为什么会出现这样的现象,只是一个个凭感觉试出来的.如果有大神知道原因,希望能留言,如果不知道的正巧看到这篇文章,也可做个参考,解决一些可能是由于背景图产生的问题.惯例先上效对比果图(这里注释了背景).

关于IE6行内多个元素浮动背景图对宽度影响CHROME和IE6对比
关于IE6行内多个元素浮动背景图对宽度影响CHROME和IE6对比

按照正常思路完成布局和代码编写后,基本上ie7+和主流标准浏览器看起来都不错.然而IE6,就是令人蛋疼.是怎么蛋疼了呢仔细看图,我放代码和DEMO页面(此页面兼容):

继续阅读“关于IE6行内多个元素浮动背景图对宽度影响”

一个小小的双引号引发的思考-XP内IE下的字体(上)

有个效果如图:

这样的双引号只能用图片代替了
这样的双引号只能用图片代替了

本来写了个全无图的效果.不过似乎只能针对XP下有对应的黑体和微软雅黑才行.在公司的WIN7电脑测试本来这个双引号不需要用到背景图,可是回来准备严格测试的时候,发现问题了,在虚拟机上的一个纯净的精简XP上,这个双引号就算用黑体也是大大的两个像圆形的逗号…最终测试无效,只好用背景图实现了.

继续阅读“一个小小的双引号引发的思考-XP内IE下的字体(上)”