首页新闻找找看学习计划

微信使用的是什么版本的浏览器?

0
悬赏园豆:20 [已解决问题] 解决于 2014-08-25 11:40

目前在做一个微信公众账号的网站,该网站在网页上正常显示,在三星手机上正常显示,但在苹果手机里就不行了。我想问一下微信在安卓手机 和苹果手机里 分别使用的是什么浏览器呢?

sidalin的主页 sidalin | 初学一级 | 园豆:154
提问于:2014-08-22 11:34
< >
分享
最佳答案
0

文本框的宽度有什么问题?是这个吗?

How to make a textbox and a textarea same width across browsers

收获园豆:15
爱编程的大叔 | 高人七级 |园豆:29788 | 2014-08-22 12:14

可以把这个网页的内容发给我一下么?  我这边不能访问国外网站    我邮箱是  523463345@qq.com 

sidalin | 园豆:154 (初学一级) | 2014-08-22 13:01

@sidalin: Update: It's been a long while since I've written this post. For a better way to solve this problem, please see http://www.w3schools.com/cssref/css3_pr_box-sizing.asp (http://caniuse.com/#search=box-sizing)

Thanks to the *brilliant* CSS box model, very simple tasks have become a nightmare.

I've been struggling lately to do a very simple thing, which is to make a textbox (ie. <input type="text">) and a textarea same width so that they align nicely.

The problem with making a textbox and textarea same width is that all browsers add 1px padding to textboxes that can't be removed. In other words, setting the padding to 0px won't remove that 1px padding. A common trick to get rid of padding is to float the element but unluckily this doesn't work with textboxes. Well, this means we have extra 2px in the width of the textbox that we simply can't get rid of. Now, this wouldn't be a problem if the same thing applied to textreas as well but unfortunately this is not the case. In most browsers (IE, Safari and Chrome), setting the padding of a textrea to 0px *unfortunately* works. One exception to this is FireFox which applies the 1px non-removable padding to textareas as well. This is why the problem doesn't exist with FireFox. But, should we ignore IE, Safari and Chrome and assume everyone is using FireFox? I guess not, it definitely makes more sense to make it work in those browsers and find a hack for FireFox and actually this is what I did.

Having had a look on mozilla's website, I came across those two extensions to CSS:
-moz-padding-start and -moz-padding-end.

So, to make a textbox and a textrea same width across browsers you can use this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> * { padding: 0px; margin: 0px; } #textbox { width: 500px; -moz-padding-start: 1px; -moz-padding-end: 1px; } #textarea { width: 500px; padding: 1px; } </style> </head> <body> <input type="text" id="textbox" /><br /> <textarea id="textarea"></textarea> </body> </html>
Adding 1px to the textrea makes the text look nicer than with no padding at all (with 0px padding, the text sticks to the border which is not visually appealing). In FireFox, we will have 2px padding for the textarea and 2px left and right padding for the textbox, but, visually speaking, it almost looks the same (try to view the code in FireFox).

This code was tested in IE, Safari, Chrome, FireFox and SeaMonkey (which uses the same rendering engine as FF) and worked perfectly. Note that this hack is not perfect. For example, Opera will display the textarea 2px wider than the textbox. For me I don't care about Opera very much (not so many people use it), besides it's only 2px, so, it's not something that will make your site unusable. There could probably be a hack for Opera too but again I'm not interested in Opera, so for me it's not worth the time. It probably won't work with other less popular browsers too. I tested it in the ones I care most about (2 extra pixels in a not popular browser is not a big deal. I can live with that).

In terms of rendering engines (aka layout engines), this will work with Trident based browsers (Internet Explorer), WebKit based browsers (Safari, Google Chrome and other browsers) and Gecko based browsers (FireFox, SeaMonkey and other browsers).

Please note that this won't work if the visual styles are not enabled in Windows XP or Vista (with the exception of FireFox and the other browsers that are based on the same engine), but as very few people (almost none) disable the visual styles so I'm not so worried about that one too.

Finally, if you're a control freak and want it to work in every browser then your last resort is javascript (I was working on that but gave up on it after I came up with this simple hack), but even this won't work if javascript is disabled in the browser.

爱编程的大叔 | 园豆:29788 (高人七级) | 2014-08-22 13:24
其他回答(7)
0

微信应该用的是自己的一套浏览器(QQ浏览器已现成开发了)

出现你这个情况,也许在苹果里使用了safari?或者你在苹果里也安装QQ浏览器看?

519740105 | 园豆:5810 (大侠五级) | 2014-08-22 11:36

如果是这种情况的话,那岂不是要兼容 QQ浏览器  Safari  等浏览器? 

支持(0) 反对(0) sidalin | 园豆:154 (初学一级) | 2014-08-22 11:39

负责任地说,腾讯还没有自行开发浏览器CORE,只是类似360浏览器、MYIE2、MAXTHON之类的一个样,

调用了浏览器CORE。业界也就那么两三个浏览器的底层。

支持(0) 反对(0) 爱编程的大叔 | 园豆:29788 (高人七级) | 2014-08-22 11:50

@sidalin: 只要兼容4个浏览器就行了,

SAFARI、FIREFOX、CHROME、IE。

支持(0) 反对(0) 爱编程的大叔 | 园豆:29788 (高人七级) | 2014-08-22 11:50

@爱编程的大叔:   请问下  你是怎么兼容  safari 和firefox的文本框 宽度的问题的呀?

支持(0) 反对(0) sidalin | 园豆:154 (初学一级) | 2014-08-22 12:03

@sidalin: 移动浏览器的兼容应该要简单点吧。

支持(0) 反对(0) 519740105 | 园豆:5810 (大侠五级) | 2014-08-22 13:30
0

不负责任的猜一下,可能是系统自带的浏览器。

Firen | 园豆:5483 (大侠五级) | 2014-08-22 11:39
0

移动端浏览器不都是基于webkit内核的么?

骑着蜗牛耍流氓 | 园豆:178 (初学一级) | 2014-08-22 14:41
0

估计不是自带浏览器的问题,把你显示不正常的代码找出来才是王道,

nater216 | 园豆:229 (菜鸟二级) | 2014-08-22 15:49

就是   文本框    下拉框  多行文本框  的对齐问题。 在     微信安卓版 里 是一个样子,在微信苹果版里是另一个样子,无法做到两全。 最后商议今天先优先满足苹果 的需求,下礼拜再来想办法。

支持(0) 反对(0) sidalin | 园豆:154 (初学一级) | 2014-08-22 19:03
0

这个应该是兼容性问题吧符合w3c标准基本都能打开,估计要做两个版本的安卓和水果的。

You最温暖的港湾 | 园豆:103 (初学一级) | 2014-08-22 20:21
0

要看你不正常的页面是怎么写的,才知道了。基本上是一样的。除了win phone.

forhells | 园豆:969 (小虾三级) | 2014-08-22 22:51
0

安卓的跟chorme一样,苹果的要用safari这个测!

收获园豆:5
潮流还是非主流 | 园豆:306 (菜鸟二级) | 2014-08-25 11:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册