一、水平翻转和垂直翻转：

第一种：随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下：
/*水平翻转*/

.flipx {

    -moz-transform:scaleX(-1);

    -webkit-transform:scaleX(-1);

    -o-transform:scaleX(-1);

    transform:scaleX(-1);

    /*IE*/

    filter:FlipH;

}

/*垂直翻转*/

.flipy {

    -moz-transform:scaleY(-1);

    -webkit-transform:scaleY(-1);

    -o-transform:scaleY(-1);

    transform:scaleY(-1);

    /*IE*/

    filter:FlipV;

}
第一种兼容性好；


第二种，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式：
/*水平翻转*/

.flipx { transform: rotateY(180deg); }

/*垂直翻转*/

.flipy { transform: rotateX(180deg); }

　注意：用第二种情况在iPhone5会出现兼容问题，

transform: rotateY(180deg);
这样写选择无效，如图标题右边图片所示：



所以还是用第一种方法。


例子：


HTML代码：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <title>Document</title>

    <style type="text/css">

        *{margin:0; padding:0;}

        body{ max-width: 640px; margin: 0 auto; }

        .left{ float: left; }

        .right{ float: right; }

        .public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px;  color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x; background-size: 1px 38px; }

        /*注意  background-size: 1px 38px; 当宽度写成auto时，安卓手机标题背景不显示background-size: auto 38px;*/

        .public_bzhh_title span{ display: block; }

        .public_bzhh_title span.left,

        .public_bzhh_title span.right{ background:#ffc99f url(title_edge.png) no-repeat; width:21px; height: 38px; background-size: 100% 100%; }

        .public_bzhh_title span.center{ overflow: hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;  }

        .public_bzhh_title span.right{

            /*水平翻转 这个兼容性比较好 安卓低版本都可以兼容*/

            -moz-transform:scaleX(-1);

            -webkit-transform:scaleX(-1);

            -o-transform:scaleX(-1);

            transform:scaleX(-1);

            /*IE*/

            filter:FlipH; }

         .note{font-size: 23px; color: red; margin: 10px; line-height: 30px; }

    </style>

</head>

<body>

<div class="public_bzhh_title"><span class="left"></span><span class="right"></span><span class="center">你是否在困扰这些问题？</span></div>

<p class="note">注意: </p>

<p class="note">样式中background-size: 1px 38px; 当宽度写成auto时，安卓手机标题背景不显示background-size: auto 38px;</p>

</body>

</html>




效果图：




二、background-size兼容问题，在安卓手机上背景图片无法显示如图所示：








.public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px;  color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x;background-size: auto 38px;}






若上面的样式这样写就出现如上图所示，兼容问题，宽不能用auto自适应来写。


改这个兼容问题很简单，只要把最后一个样式改为 background-size: 1px 38px;就可以


效果图：




　原链接：http://www.zhangxinxu.com/wordpress/?p=1637


												


											
CSS3水平翻转样式和background-size兼容问题的更多相关文章
	

    
								
  1. 几个常用的CSS3样式代码以及不兼容的解决办法
		
    原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...
    
		
    2. 
						
  2. CSS/CSS3常用样式小结
		
    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
    
		
    3. 
						
  3. [总结]CSS/CSS3常用样式与web移动端资源
		
    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
    
		
    4. 
						
  4. CSS3详解：background
		
    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
    
		
    5. 
						
  5. html5 +css3 点击后水波纹扩散效果 兼容移动端
		
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
    
		
    6. 
						
  6. css3-3 css3背景样式
		
    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
    
		
    7. 
						
  7. 炫酷的CSS3抖动样式:CSS Shake
		
    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
    
		
    8. 
						
  8. css3-4 css3边框样式
		
    css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...
    
		
    9. 
						
  9. CSS3新特性，兼容性，兼容方法总结
		
    css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux常用命令----基本文件系统常用命令
			
    1.查看当前工作目录---pwd sunny@sunny-ThinkPad-T450:~$ pwd /home/sunny sunny@sunny-ThinkPad-T450:~$ cd Worksp ...
    
			
    2. 
						
  2. 高性能Web服务器Nginx的配置与部署研究（12）应用模块之Memcached做文件缓存时压缩引起的问题
			
    在上一篇文章中,提到的Nginx的Memcached模块应用场景,主要是作为文件缓存.然后就发现了一个问题,当以字节数组方式缓存较大的文件时,缓存数据会被压缩,从而在读取的时候出现问题. (本文欢迎转 ...
    
			
    3. 
						
  3. qt的exe文件查找依赖的dll
			
    用qtcreater编译完工程生成的exe文件往往会依赖dll文件.如何一次定位exe文件所以依赖的所有dll文件呢,今天发现了软件叫hap-depends. 截图如下: 用这个软件打开exe文件就会 ...
    
			
    4. 
						
  4. Java读取Unicode文件（UTF-8等）时碰到的BOM首字符问题
			
    在Windows下用文本编辑器创建的文本文件,如果选择以UTF-8等Unicode格式保存,会在文件头(第一个字符)加入一个BOM标识.   这个标识在Java读取文件的时候,不会被去掉,而且Stri ...
    
			
    5. 
						
  5. 647. Palindromic Substrings 互文的子字符串
			
    ［抄题］: Given a string, your task is to count how many palindromic substrings in this string. The subs ...
    
			
    6. 
						
  6. Mule ESB 安装基本配置要求
			
    Hardware Requirements* 2GHz, dual-core CPU, or 2 virtual CPUs in virtualized environments 2GB of RAM ...
    
			
    7. 
						
  7. 无网络安装mysql步骤
			
    1. 先安装Microsoft Visual C++ 2010 运行环境,运行vcredist_x86.exe文件: 2. 安装MySql数据库,运行mysql-installer-community ...
    
			
    8. 
						
  8. 1.在VC编译器下面为什么每个头文件以及源文件都要包含“stdAfx.h”，那么stdAfx.h中到底存放了什么，用来做什么？
			
    我们知道在windows平台下面很多的文件后缀名中都含有Afx,其实Afx是微软公司的一个技术研发团队名称,vc下的“stdAfx.h”和“stdAfx.cpp”文件就是有他们所研发出来的,为什么要这 ...
    
			
    9. 
						
  9. EZOJ #257
			
    传送门 分析 先进行缩点 之后从终点倒着跑 对于一组边如果有一个点不能到达则这组边直接废掉 最后看只用没废掉的边能不能从起点走到终点 代码 #include<iostream> #incl ...
    
			
    10. 
						
  10. Ubuntu下安装配置ScrumWorks
			
    1) 安装JDK6 Ubuntu默认的是OpenJDK,而ScrumWorks不支持使用OpenJDK哦,一次必须装个Oracle的JDK6   2) 下载安装Mysql5 http://dev.my ...
    
			
    11.