ie浏览器和谷歌浏览器样式不一致

2024-08-24

在chrome浏览器和在IE浏览器中显示的页面样式不一样的解决办法

在IE浏览器中添加一行代码即可:<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 位置:在<head></head>里面结果如下:<head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head>

input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽.border与padding不在值里面,在浏览器上显示可见. select width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

【前端】webkit内核浏览器DIV滚动条样式修改和设置

webkit内核浏览器DIV滚动条样式修改和设置引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内核浏览器滚动条样式的修改方法. 原理: webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-t

重置浏览器的默认样式（css reset）

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

Android DatePickerDialog样式不一致的问题

三星和华为的平板上,DatePickerDialog的显示样式不一致.三星的仅仅显示月日年选择框,而华为的平板上另外还显示了日历表.代码同样. 可能是系统控件做了部分改动,后来你发现是能够设置的: DatePickerDialog dialog = new DatePickerDialog( , , , ); dialog.getDatePicker().setCalendarViewShown(false); 通过设置后,华为平板上将不再显示日历表.

css重设样式_清除浏览器的默认样式

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一. 收集的默认样式的链接地址: 1.eric-meyer-reset-csshttp://cssreset.com/scripts/eric-meyer-reset-css/ 2.html-5-reset-stylesheethttp://html5doctor.com/html-5-reset-stylesheet/ 3.yahoo-css-reset-yui-3

支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)

/**************** 网址:https://github.com/sofish/Alice /****************** @charset "utf-8"; /* @名称: base @功能: 重设浏览器默认样式 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html{ color:#000;background:#fff; -webkit-text-size-adjust: 100%; -ms-te

关闭safari浏览器button默认样式

前两天又遇到一个头疼的问题,在Chrome上调试好的样式,去到手机上打开,傻了... 这是什么鬼... 搜了一下,才知道这是appearance属性搞的鬼.. . 比方你想让一个div拥有button的样式.能够这么写 div { appearance: button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和 Chrome */ } 所以取消掉默认的button样式,自己写的才干显示

优化浏览器默认scroll样式小技巧

一个最简单的页面: <!DOCTYPE html> <html> <head> <title>优化scroll</title> <meta charset="utf-8"> <style type="text/css"> body{ width:2000px; height: 2000px; margin:0; padding:0; } </style> </hea

rest.css解决不同浏览器元素默认样式不同的问题

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,

CSS改变浏览器默认滚动条样式

前言最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式比如我博客的滚动条,自定义滚动条样式和hover前后的效果顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决注:经测试,目前只支持webkit内核的浏览器,比如,谷歌,Safari,edge,360安全和360极速浏览器的极速模式,火狐,IE,opera等不支持 Demo <html> <head> <meta charset="utf-8" /> <title>

JSP页面与html页面在ie下显示的样式不一致的问题

今天前端将样式与html给我文件我转化为jsp之后在我的电脑上使用IE11的IE9和其他浏览器都没有问题,但是在发给其他人检查的时候却发现在win7电脑的IE9上出现样式错乱的问题,前端调试无果的情况下,在网上找到了解决方案解决方案我们应该把<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

浏览器间CSS样式兼容问题

1.display:table居中显示在chrome和safari浏览器上兼容问题 2.滤镜在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题对于一行显示,基本上对所有的浏览器而言,没有什么兼容问题,但对于多行显示时,就会存在一些问题,css3样式中有专门针对webkit浏览器多行显示的省略号,但这种样式在其他浏览器中,可能就会没有效果 4.input输入框,文字离左边框的距离一般不要用padding-left,当输入框的输入的文字超过了文本框的宽度后,pad

css3修改浏览器scroll默认样式

最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑爆. 遂度娘资料,通过css3进行修改. /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-w

css 改变浏览器滚动条的样式

/*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .

针对IE浏览器的CSS样式（兼容性）

1. IE hacks: "_" 是IE6 专有的hack; "\9" 对IE6-IE10都有效: "\0"对IE8-IE10都有效: "\9\0"对IE9-IE10都有效: 优点: CSS hacks 内嵌在普通的 CSS 里面,不会产生更多 HTTP 请求.CSS hacks 内嵌在普通的 CSS 里面,编写时比较方便. 缺点: 它是不标准的产物.内嵌在其他 CSS 中,不便维护.尤其是当 hacks 的数量比较多的

支持-webkit-前缀的浏览器修改滚动条样式

//血槽宽度 ::-webkit-scrollbar { width:8px; height:8px; } //拖动条 ::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,.3); border-radius:6px; } //背景槽 ::-webkit-scrollbar-track { background-color:#ddd; border-radius:6px; } 效果如图

style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

style.currentStyle.getComputedStyle区别介绍样式表有三种方式内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(St

有关DotNetBar设计样式和运行时的样式不一致的问题

可以在窗体类构造函数的InitializeComponent后加上下面圈出的内容: this.EnableGlass = false; 参考文章 DotNetBar如何控制窗体样式

在ie和chrome浏览器中滚动条样式的设置

1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/scrollbar-shadow-color: color; /*立体滚动条阴影的颜

ie浏览器和谷歌浏览器样式不一致

热门专题