<!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>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>QQ娱乐网</title>
<style type="text/css">
<!--
body{background:#DCD800margin:0px}
.all{width:720pxheight:720pxbackground:#FFFAB3margin:auto}
.top{width:720pxheight:200pxbackground:red}
.top1{width:720pxheight:70pxbackground:bluemargin:0 0border:0display: inline}
.top1left{width:120pxheight:70pxbackground:#ffffffmargin:0 0border:0float:leftdisplay: inline}
.top1right{width:600pxheight:70pxbackground:#000000margin:0 0border:0float:leftdisplay: inline}
-->
</style>
</head>
<body>
<div class="all">
<div class="top">
<div class="top1">
<div class="top1left">
</div><!--top1left-->
<div class="top1right">
</div><!--top1right-->
</div><!--top1-->
</div><!--top-->
</div><!--all-->
</body>
</html>
为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句
这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。
手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, viewport的好处就在于一套css可以适配多个机型。
在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是
1px变粗的原因： viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
解决方案
1.rem解决：
2.flexible.js
这是淘宝移动端采取的方案, github的地址: https://github.com/amfe/lib-flexible . 前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样干的。
<meta name=”viewport”>里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport
3.伪类+transform实现
对于解决1px边框问题，我个人觉得最完美的解决办法还是伪类+transform比较好。
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位
转自 https://blog.csdn.net/a419419/article/details/80217328
<div class="sousuotiao"><form>
<div class="sousuo">
<b>影片搜索：</b>
<input name="" type="text" />
<input name="" type="button" class="anniu" />
</div>
</form>
</div>
这样写
