大家好，关于谷歌浏览器切图很多朋友都还不太明白，今天小编就来为大家分享关于谷歌浏览器切屏的知识，希望对各位有所帮助！

本文目录

1. 网站建设,如何做到网站浏览器兼容
2. 淘宝美工图片错位

一、网站建设,如何做到网站浏览器兼容

建设网站时程序员都会装有多款的浏览器，来测试网站的兼容，如果有某种浏览器不能正常显示，就意味着需要调整了，那么公司网站建设如何兼容各式的浏览器呢？

为什么要做浏览器兼容性？

因为不同的浏览器在开发的时候，对html或css的解释都稍有不同，这就导致网页在一个浏览器中看着正常，但到另一个浏览器中却乱版了，而你又无法预先得知访客使用的是何种浏览器，因此为了提高客户体验度，我们要对网页的浏览器兼容性做测试。

经常浏览页面的人应该了解，有时候浏览网页，打开之后，网页全跑到屏幕的一边，或者旁边有过多的留白，不用考虑，这就是老网站的一种特征，由于以前的屏幕比较小，在之前用是可以的，现在人们用的都是大屏幕的宽屏显示器，因此打开之前的网站，显示上肯定有一些问题，有的小问题不影响访问，然而随着浏览器的更新换代，以往的网站开发程序兼容不够，可能也会导致页面错乱，影响访问。

全球这么多浏览器，都要做兼容吗？

目前全球市面的上浏览器非常多，也许足有100多种，但我们在网页制作过程中，只需要对主流浏览器进行兼容测试。这包括：IE、火狐(Firefox)、谷歌(Chrome)、苹果(Safari)、Opera等几款全球应用范围最广的浏览器。

像国内的一些主流浏览器，例如360浏览器、搜狗浏览器、腾讯浏览器、遨游等，实际上都是采用与IE或谷歌浏览器相同的内核，其兼容标准与你机器上所安装的IE或谷歌浏览器版本是完全一样的，我们可以理解为这些浏览器只是换了一个皮肤，因此没有必要再对他们做另外的测试。

哪些原因导致了浏览器不兼容网页呢？

一般网站的制作都是设计做好效果图之后，根据效果图切图然后用DIV+CSS去写网站前台代码，每个前端写的方式都不一样，所用的浏览器也不一样，所以在测试过程中只考虑自己熟练用浏览器没有任何问题就可以了，根本不考虑其他浏览器的显示效果。所以在写前端程序的时候最好在电脑上多安装几个浏览器，比如：IE、360、火狐、猎豹等。无论哪个浏览器，在写程序的时候一定要遵循着W3C标准，如果你用的是高版本HTML端语言，而用户端使用的是低端浏览器，那么就会出现有的HTML代码浏览器不认。所以就造成网页页面不兼容。

互联网最大的好处就是让我们可以一起分享资源，所以现在有的小公司因为考虑成本在网上找一些源码去制作网站，等做好之后却发现网站和浏览器不兼容，打开之后出现奇奇怪怪的东西。其实这是因为这些源码在分享传播的过程中被无数次修改，甚至有的被加了木马程序，所以当你把这些带有漏洞的代码应用到你的网站上面去了之后就会出现各种问题，最大的问题就是浏览器不兼容，很多图片和文字打不开。所以我们建议中小企业做官网还是要找专业的网建公司，避免后期网站做好之后出现各种问题。

不二网全响应式建站，采用响应式设计，页面可以自动适配屏幕，提供最佳展示，利于百度、Google对页面索引属性的创建，对网页的内容的抓取。

企业只要一个网站，就能够手机端电脑端各种浏览器兼顾，对公司整体业务需求满足，全而广的推广覆盖，有效吸引潜在客户：www.bu2w.com/jianzhan/dingzhijianzhan.html

二、淘宝美工图片错位

1.首先可以使用火狐或谷歌浏览器查看下图片错位部分的代码，一般<table></table>标签最后一个<tr>标签中的<img>标签应该都是没有图片路径的。其实这里是缺了一个分隔符，虽然高度只有1px，但是确实支撑整个表格的最底层元素。一般在其他浏览器都是没问题的，到了火狐浏览器，就会出现散屏现象。只要找到这个分隔符，上传到淘宝后台，将页面代码中缺少的分隔符补充上去就能解决问题了。

2.打开PS导出的图片文件夹，找到分隔符(一般的命名都是分隔符,大小都是宽1px,高1px)，并上传到淘宝后台。

3.将分隔符图片上传到淘宝后台，获取图片链接

4.将发布后显示不正常的代码复制到DW中的Html页面中，找到表格最后一行缺少图片路径的地方。

5.光标选择src=””,然后按下Ctrl+F键，打开查找和替换窗口，将src=””替换为src="分隔符上传淘宝后的路径"，然后点击”替换全部”按钮即可。全部替换后，会将所有src=””替换掉，会弹出替换的个数，检查下最后一样缺少分隔符的<img>标签数，不要把其他区域的src=””给替换了。为了避免这种情况，尽量的只将显示异常的<table>标签内的代码粘贴到DW中进行编辑。

6.检查无误后，将代码重新上传页面，发布更新之后，再用各主流浏览器查看，问题解决！

7.整个页面一块儿切图，且切图的时候不细心，水平方向左右两张图都会差1~2个像素，导致最右边侧边出现分隔符。按上边的方法仍旧不能解决，可以给table标签添加这两个样式，就可以解决：

关于本次谷歌浏览器切图和谷歌浏览器切屏的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。