随笔分类 - Html/CSS
摘要：一、META/LINK相关：1、百度禁止转码通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：相关链接：SiteApp 转码声明2、添加到主屏后的标题（IOS）3、启用 WebApp 全屏模式（IOS）当网站添加到主屏幕...
阅读全文
摘要：转自：http://www.cnblogs.com/2050/p/3877280.html在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不...
阅读全文
摘要：selector { min-height:500px; height:auto !important; height:500px;}因为IE6中当内容大于容器高度或宽度时，就会撑破容器。并且在同一个规则里，重复定义一个属性，即使先定义的值包含!important也会被忽略而覆盖掉该值。
阅读全文
摘要：在表格应用了跨列单元格后，在IE6/7下当跨列单元格中的元素长度超过其跨列单元格中第一个单元格的宽度时会产生换行，如下所示：解决方法：1. 设置 table 的 'table-layout' 特性值为 fixed，使用固定布局的表格元素可避免此问题。2. 跨列的单元格的宽度都设置成 auto。
阅读全文
摘要：此文根据Steven Bradley的《How Well Do You Understand CSS Positioning?》所译，整个译文带有我自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。CSS盒模型和定位的类型为了搞清楚定位首先你得了解CSS盒模
阅读全文
摘要：BFC其实没有那么神秘，BFC只是一个独立的布局环境，理解BFC对我们日常的布局设计上有着重要的帮助，并且BFC和Margin Collapse之间有着重要关联。另外文中还提到了clear float时候所产生'clearance'的计算。希望大家有所收获
阅读全文
摘要：本文由白牙根据Heydon Pickering的《Semantic CSS With Intelligent Selectors》所译，整个译文带有我自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/，以及作者相关信息——作者：Heydon Pickering——译者：白牙“结构永远服从于功能，这是不变的法则”，建筑工程师“摩天大楼之父”Louis Sullivan如是说。因为工程师不
阅读全文
摘要：ie6~7下display:inline-block无效解决方案：需要hack触发hasLayout1 //IE6、7中内联元素（如span）触发layout属性后， 它的行为和标准中的 inline-block类似2 //IE6、7中块级元素（如div）触发layout属性，同时设置了 display: inline ，那么它的行为和标准中 inline-block 类似3 {4 *display: inline;5 *zoom:1;6 }IE6及更早浏览器只支持a(具有href属性)元素的:hoverIE6浮动元素与非浮动元素相邻的3px间距bug解决方案：为浮动元素添加一...
阅读全文
摘要：此文根据Chris Coyier的《A Complete Guide to the Table Element》所译，整个译文带有我自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。一个非常基础的例子下面是一个非常简单的表格数据例子：这是一个跨多轴的数据。想象下，通过你得手指划过某一行来了解某个人的相关信息。或者从上至下来感受某个数据点的模式和变化。表头和表体上面这个基础例子中我们没有做的一件事是没有语义地指出第一行是该表格的头部。我们本应该这么做。整个第一行的部分没有包含数据，它只是每个列的标题。因此，我们可以元素来完成这件事情，它会包裹第一个元素(它会包裹所有的行所需要的头部信息)
阅读全文
摘要：display:inline-block;在各浏览器下的问题和终极兼容办法一、IE 5.5、6、7 、8（Q）中display:inline-block;失效兼容办法：IE 5.5、6、7 、8（Q）中 block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用zoom:1 等触发 hasLayout。 IE 5.5、6、7 、8（Q）中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。二、现代浏览器中 inline 和 block 元素 display:inl
阅读全文
摘要：float是什么？float即为浮动，在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：文档流：在html中文档流即为元素从上至下排列的顺序。脱离文档流：元素从正常的排列顺序被抽离。最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。float造成的影响对其父元素的影响对于其父元素来说，元素浮动之后，它脱离正常文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下图所示。 1 //CSS 2 #wrapper { 3 p...
阅读全文
摘要：一、控制元素的可选值selector { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }可选的值：auto——默认值，用户可以选中元素中的内容none——用户不能选择元素中的任何内容text——用户可以选择元素中的文本element——文本可选，但仅限元素的边界内(只有IE和FF支持)all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。-moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过te...
阅读全文
摘要：A A A A A A
阅读全文
摘要：firefox不支持column-span属性。firefox下应用了column-count属性的元素无法应用伪元素:before和:after，其绝对定位的子元素也无法显示。
阅读全文