文档章节

-webkit的几个属性

绝艳天纵
 绝艳天纵
发布于 2012/10/17 09:50
字数 497
阅读 246
收藏 4

现在IOS和ANDROID上面都是webkit内核,所以在手机上使用CSS样式,-webkit的几个属性很重要

-webkit-text-size-adjust

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的


-webkit-user-select

1、 none:用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。
2、 -webkit-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。
3、 -webkit-none:子元素所有的文字都不能选择,但是input输入框中的文字除外。


-webkit-touch-callout

有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target="_self"来指定用户在新窗口打开,或者target属性保持空,但 是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的 target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台


-webkit-tap-highlight-color

这个属性只用于iOS(iPhone和iPad)。
当你点击一个链接或者通过js定义的可点击元素的时候,就会出现一个半透明的灰色背景。
当然如果想要禁用高亮,设置颜色的alpha值为0。
-webkit-tap-highlight-color:rgba(255,0,0,0.5);

 

-webkit-appearance

在写样式的时候,iphone会有一些默认样式,比如 <input type=”submit” style=”background:#000″ value=”提交” /> 背景竟然是比较灰,并不黑。
使用-webkit-appearance:none可去除系统默认的样式


© 著作权归作者所有

上一篇: Ubuntu下使用LAMP
下一篇: .tar.xz文件的解压
绝艳天纵
粉丝 5
博文 38
码字总数 47139
作品 0
程序员
私信 提问
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
164
0
【前端】webkit内核浏览器DIV滚动条样式修改和设置

本文转载于:猿2048网站【前端】webkit内核浏览器DIV滚动条样式修改和设置 webkit内核浏览器DIV滚动条样式修改和设置 引言:   最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到...

前端老手
09/05
19
0
CSS3圆角属性在Firefox,Chrome,Safari,opera使用方法

今天在aw那里看到他的博客用了Firefox专有的圆角属性,另外WordPress的后台也使用了,于是我自己也就试一下来用了。目前IE还未 直接圆角,IE8我还不清楚支不支持,或许我们以后只要使用borde...

绿悠悠
2010/12/06
1K
9
css3文字水平垂直居中对齐的几种方法

1.使用绝对定位: .div{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 2.flex布局: .parent{ Justify-content:center; // 子元素水平居中 align-items:ce......

xiaonian12
2018/09/12
32
0
CSS3圆角属性在Firefox,Chrome,Safari的实现

先说一下Firefox的圆角属性: -moz-border-radius: {1,4} | inherit 如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px; 也可以单独设置元素的上左、上右、下...

绿悠悠
2011/01/18
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

使用原生css+js+html实现打印A4纸张的功能页面

有时候我们需要使用html+css实现打印A4纸张的功能页面,以下代码实现 <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl......

b0cloud
18分钟前
2
0
读组件化之MGJRouter源码第二次的收获与思考

上一次我们写好了一个自定义的 路由类 ,然后我们来制作自己的 库 ,可以用来被 pod 引入 : 库的制作参考:https://www.jianshu.com/p/928d2ab053be 以下是我创建的: 利用上篇提到的 ,组件...

T型人才追梦者
20分钟前
1
0
spring cache、ehcache的使用及集成

项目中需要加缓存,故学习了 1、spring cache、ehcache的使用及集成 2、缓存的命中率等统计数据 一、spring cache 1、概述 Spring 3.1 引入了基于注解(annotation)的缓存(cache)技术 2、...

qkKing
21分钟前
3
0
Windows 10上源码编译Poco并编写httpserver和tcpserver | compile and install poco cpp library on windows

本文首发于个人博客https://kezunlin.me/post/9587bb47/,欢迎阅读! compile and install poco cpp library on windows Series guide to compile and install poco cpp library on windows g......

kezunlin
22分钟前
2
0
if-else-if-else与switch的区别

if-else-if-else: 适合分支较少 判断条件类型不单一 支持取 boolean 类型的所有运算 满足条件即停止对后续分支语句的执行 switch: 适合分支较多 判断条件类型单一,JDK 1.7 之前仅支持 in...

ConstXiong
22分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部