css区分浏览器样式

最新推荐文章于 2022-04-29 11:26:27 发布
最新推荐文章于 2022-04-29 11:26:27 发布
阅读量282 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45886612/article/details/116196565
版权

由于同一个样式在不同浏览器中会有不同的表现，让对齐什么的很不容易 所以要做不同浏览器中的不同适应，这里列举了兼容火狐、谷歌、IE8以上的方法。

谷歌浏览器

谷歌浏览器中直接写就好

IE浏览器

\0是IE八以上可以识别的 所以想让IE优先是哟个这类属性在属性后面加上\0就可以了

火狐浏览器

@-moz-document url-prefix() {} 将选择器卸载花括号中就算有一样的选择器，火狐也会优先使用花括号之内的东西。

慌得一批的小菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【转载】CSS样式：浏览器之间样式区分
不懂love的博客
10-25 613
按顺序进行：FF、IE8: background-color:#000000 !important;IE7: >background-color:#990000 !important;IE6: background-color:#FFCC00; ====================================================================参考：跨浏览器的
针对主流浏览器的CSS-HACK写法及IE常用条件注释
12-13
为了让所写代码在各主流浏览器中正常运行，我们不得不为各种浏览器写对应的样式。本文，青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.一、通用区分方式：IE6、IE...
css区分浏览器
tobe_honest的专栏
04-21 320
/**所有浏览器**/margin-top/9:-97px; /**IE6/7/8**/*margin-top:-100px; /**IE6/7**/
CSS样式引用浏览器判断
一梦三四年～
12-23 131
css样式判断浏览器
运斤成风
08-27 246
[b]区别IE6、IE7、IE8、Firefox[/b] #tip { background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 为IE系列浏...
css区分各个浏览器和css Hack
墨尔本,晴
09-07 262
[code="java"]
ie10 css hack 条件注释等兼容方式整理
12-13
ps:条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。 但是，如果IE10不再支持条件注释，我们唯一的选择只能针对css的问题用css hack或者判断浏览器来解决 我们当然不希望...
前端css+html+布局笔记
09-14
将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现...
js判断是手机还是pc并调用不同css样式
07-18
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|...link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen" />'); }判断手机端访问调用的css
简洁短小的 JavaScript IE 浏览器判定代码
10-29
IE浏览器不管是什么版本，总是跟Web标准有些不太兼容。对于代码工作者来说，自然是苦不堪言，为了考虑IE的兼容问题，不管是写 CSS 还是 JS，往往都要对 IE ...本文不讨论如何区分 IE 的样式，仅是 JS 判定 IE 浏览器。
动态加载Css 浏览器判断
08-15
动态加载Css 浏览器判断 Browes 浏览器判断
JS如何判断浏览器类型和详细区分IE各版本浏览器
12-12
今天用到JS判断浏览器类型，于是就系统整理了一下，便于后期使用。 /* * 描述：判断浏览器信息 * 编写：LittleQiang_w * 日期：2016.1.5 * 版本：V1.1 */ //判断当前浏览类型 function BrowserType() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = userAgent.ind
js、css、html判断浏览器的各种版本
01-17
js、css、html判断浏览器的各种版本
用CSS代码来判断浏览器是Firefox、IE6、IE7的网页特效代码
weixin_33832340的博客
11-12 98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head&gt...
VUE 响应式布局-根据浏览器宽度展示不同的css样式
m0_51079637的博客
10-28 5597
“自己写的前端页面只能适配自己电脑，一旦再他人电脑上打开布局全乱” 就这个问题已经困扰我许久，尤其是当我在手机上打开时尤为明显话不多说，上图！ 很正常的模样是吧？看手机效果 那一瞬间，我觉得我是个fw(法王) 终于在我的不懈努力下，终于实现了动态的页面效果！ 如下图： 虽然还有些问题，但是！我觉的问题不大 主要用到的就是elementui中布局的响应式属性： 以及css3的响应式布局 @media 首先来说elementui布局的响应式属性 elementUi将一行划分成24块，可以通过使用e
判断是否是IE，加载不同css样式
spt_dream的博客
06-29 594
我最终选择第一第二种结合的方式判断全部类型 第一种方法，初始化方法中判断，然后获取头部添加样式连接。但是经过测试，IE9以上才好用 function ifIE(){ if (window.ActiveXObject || "ActiveXObject" in window){ var headHTML = document.getElementsByTagName('head')[0].innerHTML; headHTML += ' <link ...
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
wbryze的博客
04-29 256
/IE8,9/ .Ball_List, .t_list{ background-color:#E9BA84\0; border: #E9BA84 solid 1px\0; } .t_list td, .t_list th, .Ball_List td, .t_list th { border:#E9BA84 solid 1px\0; } /Firefox/ @-moz-document url-prefix() { .Ball_List, .t_list{ background-color:#E9BA84;
一些CSS和浏览器之间的怪异显示及对应的解决办法
H小志
09-24 1435
有的时候编写的CSS样式没有什么错误，但在浏览器中却会出现一些很奇怪的问题，明明没有间距的地方出现了间距，没有空隙的地方多了一条白线，或者IE、Firefox下显示的效果截然不同，这些都与使用CSS Hack的原因相同。下面列举几个在工作中经常会用到的样式属性所存在的问题及解决方案。 （1）inline-block的兼容与4px空隙问题 在实际工作中，我们经常会用到“inline-block”
CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
細水、長流√的专栏
04-12 443
现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多，可谓百家争鸣，对用户来说有了很多的可选择型，不过这可就苦了Web前端开发人员了。 今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器。如图所示： 下面就来看一下代
css区分浏览器写法
最新发布
06-01
为了确保网页在不同浏览器中的兼容性和稳定性，可以使用 CSS 的 hack 技术来区分不同的浏览器。常见的 CSS hack 技术包括： 1. 属性前缀法：在属性前添加浏览器前缀，如 "-webkit-"、"-moz-"、"-o-"、"-ms-" 等，以区分不同的浏览器。例如： ``` -webkit-border-radius: 5px; /* 适用于 Safari 和 Chrome 浏览器 */ -moz-border-radius: 5px; /* 适用于 Firefox 浏览器 */ ``` 2. 选择器前缀法：在选择器前添加浏览器前缀，以区分不同的浏览器。例如： ``` /* 适用于 Safari 和 Chrome 浏览器 */ @media screen and (-webkit-min-device-pixel-ratio:0) { /* CSS 样式 */ } /* 适用于 Firefox 浏览器 */ @-moz-document url-prefix() { /* CSS 样式 */ } ``` 3. 属性值过滤法：通过过滤属性的值来区分不同的浏览器。例如： ``` /* 适用于 Internet Explorer 浏览器 */ .ie-only { _color: blue; } ``` 需要注意的是，CSS hack 技术虽然可以解决浏览器兼容性问题，但是可能会降低代码的可读性和可维护性，因此建议在必要的情况下使用。另外，一些浏览器在更新版本后可能会取消某些 hack，因此在使用 hack 技术时需要注意版本号和兼容性问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值