css兼容问题集锦
BEGIN;
1、文本框很大,导致里面的内容不居中、以及内容为数字时,不支持text-indent属性
解:line-height: K px; (值为文本框的height值)。
2、文本框有背景图片。左边带有小图标(如手机号码,左边会有一个手机的图标),文本输入内容要在图标后面开始
解:text-align: start; text-indent: K px;
3、当文本框使用text-indent: K px;时,IE6会使得文本框向右 K 个像素。
解:display:block;
4、使用img标签,当图片很小的时候,IE浏览时会很难看,以及在input使用背景图片时,会出现边框
解:border: 0px;
5、CSS模拟圆角边框
大型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 5px;background:#77cce7;}
.xb2 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 3px;border-width:0 2px;}
.xb3 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 2px;}
.xb4 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>
<div class="items">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
小型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 3px;background:#77cce7;}
.xb2 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 2px;border-width:0 1px;}
.xb3 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>
<div class="items">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b></b>
<b class="xbottom"><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
微型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 3px;background:#77cce7;}
.xb3 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>
<b class="xtop"><b class="xb1"></b><b class="xb3"></b></b>
<b class="xbottom"><b class="xb3"></b><b class="xb1"></b></b>
6、IE6空div默认是20px高度
解:设置文字大小为1px。 即:font-size: 1px;
7、tab切换js优化(一般tab切换,都是foreach循环所有的列,进行改为未选中,然后再选择this为已选中)
解:可通过指定样式解决循环问题。
$('.c_tab_select').addClass('c_tab_unselect').removeClass('c_tab_select');
$(this).removeClass('c_tab_unselect').addClass('c_tab_select');
8、IE9及以下IE版本浏览器 margin: x x x x;不支持
解:没办法,一个一个写 margin-top: x px; ...
9、div嵌套引起的margin-top不起作用
原因:有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
解:1、在父层div加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;
END;
--- --- --- ---> 点击查看更多最新原创博文<--- --- --- ---
技术交流
css兼容问题集锦的更多相关文章
- CSS动效集锦,视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
- css兼容问题集合
css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
- ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css兼容问题与实践归纳总结
css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...
随机推荐
- xssgame记录
xss地址:http://www.xssgame.com/ 直接插入标签 构造语句,注意闭合 注意寻找输出点,这个会进行一次urlencode,和浏览器有关系,firefox过不了 javascrip ...
- bzoj3545/bzoj3551 [ONTAK2010]Peaks/Peaks加强版
bzoj3545/bzoj3551 [ONTAK2010]Peaks/Peaks加强版 传送门:bzoj bzoj wdnmd为什么加强版不是权限题原题却是啊 3545: [ONTAK2010]Pe ...
- css--BFC是什么,有什么用,怎么用?
前言 作为前端开发人员或者学生,你一定知道BFC这个关键词,但是你是否具体了解过什么是BFC?BFC有什么用?BFC怎么用些问题呢?本文就来总结一下相关的知识点,希望对阅读到的小伙伴在面试.学习.开发 ...
- Gradle Gretty进行runAppDebug的Listening for transport dt_socket at address: 5005 的后续配置
出现 Listening for transport dt_socket at address: 5005:代表debug端口已启动好了,接下来你需要进行配置远程Debug,进行附加Debug进程: ...
- JDBC中大数据量的分页解决方法?
最好的办法是利用sql语句进行分页,这样每次查询出的结果集中就只包含某页的数据内容. sql语句分页,不同的数据库下的分页方案各不一样,下面是主流的三种数据库的分页sql: oracle: selec ...
- 什么是 Spring Cloud Bus?我们需要它吗?
考虑以下情况:我们有多个应用程序使用 Spr ng Cloud Config 读取属性,而S ring Cloud Config 从GIT 读取这些属性. 下面的例子中多个员工生产者模块从 Employe ...
- rabbitmq有哪些重要角色和组件?
rabbitmq有哪些重要角色? 生产者:消息的创建者,负责创建和推送数据到消息服务器 消费者:消息的接收方,用于处理数据和确认消息 代理:就是RabbitMQ本身,用于扮演快递的角色,本身并不生产消 ...
- 什么是可重入锁(ReentrantLock)?
举例来说明锁的可重入性 public class UnReentrant{ Lock lock = new Lock(); public void outer(){ lock.lock(); inne ...
- 使用 Spring 有哪些方式?
使用 Spring 有以下方式: 作为一个成熟的 Spring Web 应用程序. 作为第三方 Web 框架,使用 Spring Frameworks 中间层. 用于远程使用. 作为企业级 Java ...
- 构造器constructor是否可被重写override?
构造器不能被继承,因此不能被重写,但可以被重载.