标签 CSS 下的所有文章

解决IE7下页面元素因浏览器渲染(重绘)Bug而不显示的问题

稍微有点经验的前端应该知道IE7-有一个经典的渲染问题,表现在对display为inline-block的元素的不友好上。我们也知道只要重新给这个元素单独宣布一条display:inline,就能解决问题。但今天我要说的不是这个,最近新完成的一个网站,在IE7下浏览,就有包括导航和热图这样的大块元素没有正常显示:
iexuanran

经过检查,发现这些没有正常显示的元素,都有一个共同的CSS属性- position:relative,导致这些元素在IE7中没有被正常的渲染到,就没有显示出来。百度了一下,这个问题归类为-IE重绘问题。当然并非所有position为relative的元素都不能在IE7中正常显示,实际情况要比我这里所指的复杂的多。由于布局的硬性需要(比如滚动图片的移动效果),使我没有办法不用relative属性,所以要解决在IE7中的渲染问题,就必须另外想办法。 查看详细 »

浅谈响应式瀑布流的实现方式

瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示,原始图片尺寸不一致,又希望每张图片都能不剪裁,完整显示,那么就要给图片规定一个宽度,解放它们的高度。利用网页高度不限这个特性,充分利用页面的空间,尽可能的展示多的图片。瀑布流的实现方法挺多,但能做到响应式列数变化,自由布局的并不多。这次自己开发了一个作品集页面,正好研究一下响应式瀑布流的实现方法。

响应式瀑布流布局的思路

响应式瀑布流需要解决的问题:

1. 响应式多列:960px宽以上呈4列,750-960呈3列,400-750呈2列,400宽以下变成1列;
2. 由于需要做响应式,那么每块的宽度就不固定,导致高度更加不可能固定。后端输出的时候,图片(块)的高度本来就是未知的,要用JS实时取到它们的高度,以便调整布局。
3. 异步加载:页面拖到最低端的时候加载更多,这个很常见。 查看详细 »

英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别

CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚,做一下笔记。

在英文段落中有时会碰到一些很长的单词,这些单词的长度超出容器宽度。在默认的页面文档中,如果单词长度超出了单行,会被自动移到下一行中,图中puzzling!就被自动换行了;而如果单词本身的长度已经超出容器宽度,常规的文档对此就没有约束力了,图中dddddd…这个单词就这么溢出了 查看详细 »

阿拉伯语网站的CSS要点总结

阿拉伯语不同于其他文字,是从右向左读的,文字要向右对齐,在CSS中右对齐的属性有两条:

1
2
text-align:right;
direction: rtl;

text-align很常见,也就是简单的右对齐属性。direction就不那么常见了。
CSS手册中对direction属性是这样描述的:该属性指定了块的基本书写方向,以及针对 Unicode 双向算法的嵌入和覆盖方向。
也就是说定义了direction:rtl的元素,文字的书写方向是从右至左。另外direction还有控制text-align默认值的作用,定义过direction:rtl的元素,如果没有预先定义过text-align,那么这个元素的text-align的值就变成了“right” 查看详细 »

响应式布局CSS3 Media Queries中屏幕分辨率顺序写法比较

CSS3的Media Queries(媒体查询)在现在的网站开发中已经被应用得越来越频繁,现在但凡开发新的网站,只要不是布局超复杂的项目,不免都要“顺手”做一些响应式布局,尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样,对于CSS的兼容问题也层出不穷,本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始,不涉及具体的技术细节。 查看详细 »

EDM制作兼容经验谈

尽管都是用HTML语言,EDM和网页的制作差别还是随着现代电脑/手机等设备的升级,不断地分化着。可以说EDM是保守的极端,应该完全避免新技术(比如CSS3新属性,HTML5的新元素等)的应用。

总结几条EDM制作最基本的要点:

  • 不能用div布局,更不能用浮动。所有关于布局都用老旧的方法 – table实现,如果有需要可以大表套小表,不过层级还是尽量精简;
  • 不能用百分比来布局,每一个单元格(td)都要用固定宽度,必要时也固定高度。页面内容区宽度推荐600px;
  • 除了图片可以外连,其他一切,包括CSS都不能外链,更禁用iframe这样的页面嵌套;
  • CSS要完全嵌入html元素中,不能写在页头,当然更不能外链。完全不用CSS3的新属性;
  • CSS2中应该禁用的常用属性有float,clear,position,top/left/right/bottom,overflow,z-index 等等…
  • 完全禁用任何形式的Javascript和其他脚本
  • HTML中应该禁用的,除了所有的HTML5新元素外,还有marquee,object,iframe,所有的表单元素和页头元素

查看详细 »

响应式网站项目中的CSS兼容性速记几条

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:

1
2
3
4
5
div { 
	width: 95%; 
	width: -webkit-calc(100% - 50px); 
	width: calc(100% - 50px); 
}

查看详细 »

WordPress自带主题twentytwelve的CSS学习笔记

现在大部分流行的WP主题都采用了响应式设计(Responsive Web Design),我的博客主题修改自twentytwelve – WP自带的的一个轻量级主题,个人认为它的样式表写法在兼容性上已经做得很好了。今天就来提炼一下其中的精华,也包括一些不太常见的CSS条目。 查看详细 »

WordPress标签云美化设置

我的博客用的主题是从twentyTwelve修改过来的。个人比较喜欢这个主题干净简洁的风格,它的特色就在于无图片,载入快速,修改起来很很轻便。但是这个主题在一些地方还是略显粗糙的,需要自己动手打磨一番。这次我就拿标签云开刀。

默认的标签云字体看上去不太舒服,尤其是中文小字体,变形比较严重。网页设计中中文字体最好不要小于12px,否则就会产生变形。而这里的字体最小单位是8pt,显然不符合要求。
先贴上修改前后的对比图
blog_11_1 查看详细 »