pc端css通用兼容样式代码，css vh兼容性

css样式代码的基本格式

CSS（层叠样式表）的代码结构包含以下几个主要部分： 选择器（Selectors）：选择器用于选择要应用样式的 HTML 元素。它可以基于元素类型、类名、ID、属性等进行选择。

定义CSS样式(三种方式)在head标签中加载一个CSS文件示例此例使用了link标签。

外部样式表 外部样式表的作用：设置一个外部样式表，在Html页面的head中添加，通过link标签标记，rel：指定其样式为stylesheet，type：指定其格式为text/css，herf：指定到欲应用的css样式文件。

OOCSS(面向对象的CSS)OOCSS的使用主要有两个原则，一种是分离结构和外观，其中主要包括分离容器和内容。OOCSS主要基于对象的编程方法，OOCSS的目的主要是支持代码的复用，最终保证样式能很好的进行添加和维护。

相关问答

Q1: ie9如何兼容css3ie9如何兼容ie8

ie10 中按下 alt 键打开菜单栏，单击“工具-兼容性视图设置”，弹出兼容性视图设置对话框。在对话框中，勾选“在兼容性视图中显示所有网站”，然后点击“关闭”。

可以在后台判断浏览器版本，如果是IE8就输出content=IE=8，如果是IE9就输出 content=IE=9。

respond.min：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

Q2: 如何才能编写出兼容各浏览器的CSS

所以 标签， 最好不要定义高度height，但一定要定义行高line-height，其他数值，根据实际效果适当变化。这样， 对不同浏览器的兼容性是最好的。

没什么捷径走，兼容性是靠经验得来的。前期建议买本css书系统学习一下，做的时候每写一句css就用不同浏览器测试一下，哪个不兼容就立刻修改css。遵守规范，谨记用合适的标签做适合的事，最少的标签做最多的事。

编写出兼容各浏览器的CSS的技巧和方法： Div居中问题：div设置 margin-left， margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin： center；这个的意思就是在父级元素内的内容居中。

条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。

我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

Q3: css样式兼容不同浏览器问题解决办法

条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。

浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

典型的css兼容问题，即该组css样式中使用了火狐浏览器不兼容的属性，导致样式无法生效；火狐浏览器的误设置，将css样式关闭。开启方式：菜单-查看-页面样式，选择为“基本页面样式”即可。

一，由于不同的浏览器，比如Internet Explorer 6，Internet Explorer 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

缺点是要控制内容不要换行 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

文字本身的大小不兼容。同样是font-size：14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。

Q4: 前端PC端兼容性问题总结

1、当使用transform：translate3d(-50%，-50%，0)居中弹框（div）时，在pc端，内部的文字会模糊。

2、解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。操作 tr 标签 问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。解决：可以操作 td 标签的 innerHTML 属性。

3、浏览器兼容性问题：新手容易忽略不同浏览器对前端技术的支持程度不同的问题，导致网站在某些浏览器中无法正常运行。代码错误和漏洞：由于缺乏经验和技能，新手编写的代码可能存在错误和漏洞，导致网站出现安全问题或功能异常。

4、备注：在B/S系统前端开时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

5、{margin：0；padding：0；} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

Q5: css如何进行响应式布局css如何进行响应式布局操作

1、User-scalable=no：用户是否可以手动缩放(默认值为no)介绍包含媒体的CSS文件 一般HTMLCSS代码都是单独编写的，Media也不例外。href= href= 在介质中编写代码 以网页的响应式布局为例。

2、简单点就是布局设置宽度的时候，用百分百设置。但这样还是很容易出问题（内容溢出，内容移位）。最好就是用响应式布局，专门针对各个分辨率进行设计css。

3、mediascreen可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。采用bootstrap框架布局 bootstrap框架布局完成的页面，是自动对应的自适应效果。

4、可以查询当前浏览器的大小，所以可以用这个方法为同一个页面设置不同的CSS样式，以满足不同的分辨率要求。采用bootstrap框架布局 bootstrap框架布局的页面是自动对应的自适应效果。

5、如何使用fiex进行响应式布局 使用fiex进行响应式布局主要是通过设置display：flex；将元素设置为伸缩容器。

6、html5如何制作响应式网页？HTML5 在制作响应式网页时，首先要考虑是全平台适配还是只是移动适配。这里以移动响应式网站为例，告诉大家如何制作响应式网页。选择基本设计尺寸，一般以1080为基准。

关于pc端css通用兼容样式代码和css vh兼容性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。