澳大利亚官方旅游网站告一段落,本来一切是那么完美……

然而不幸的是,你可能已经注意到这句话正上方图中那个红圈圈了~对,它是Lumia 720,装的是 Windows Phone 8 的系统,跑的是Internet Explorer 10(Mobile)的浏览器。你猜对了,这次又被IE给坑了!

问题描述:

这个登录框是个popup的div,所以很明显它是Ajax登录的,我有一个异常充分的理由可以让你暂先不管这种方式在安全性等方面存在的问题,那就是——设计就是这么设计的。

它完美的时候应该是下面这般容颜:

可是唯独到了Lumia里却成了下面这副屌样:

渲染失败!!!

dialog这个div中的input(甚至是a)元素背景透明了,能看到下面层的东西,placeholder莫名显示两次。

可想而知,问题是出在CSS代码上,下面是我的CSS:

.site-dialog-inputBox {
	font-size: 1.2em;
	font-family: 'Arial', 'Tahoma', 'Verdana', 'helvetica', 'microsoft yahei',"微软雅黑","SimHei","黑体",sans-serif;
	width: 92%;
	padding: 8px 4%;
	height: 20px;
	vertical-align: middle;
	background-color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset;
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset;
	-o-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset;

	-ms-border-radius: 5px;
	border-radius: 5px;
	-ms-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset;
	box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset;
}

这个Bug的出现,可能是哪里样式继承的问题,可能是dialog开始是display:none;弹出后才是display:block;引发的渲染问题,也可能是一些CSS属性的问题……

测试下来发现,是border-radiusbox-shadow同时渲染有问题,于是……

这解决方案也是个坑呀:

用modernizr的思路,加了一小段JS,如下:

	/*for mobile interaction*/
	var isWindowsPhone = /windows phone/i.test(navigator.userAgent);
	isWindowsPhone && $('html').addClass('wp-ie10');

检测Windows Phone8,给html加类,接下来修改CSS:

.wp-ie10 .site-dialog-inputBox{
	-ms-border-radius: 0;
	border-radius: 0;
	-ms-box-shadow: none;
	box-shadow: none;
}

坑爹的问题总有坑爹的解决办法——Windows Phone 的 IE上直接去掉圆角和阴影,因为现在的首要任务是让用户能登录,所以牺牲这些效果让界面可用,我觉得相当值。不过说实话,我并没有确切地找出bug的位置(因为页面上其他圆角和阴影各自独立的效果是可以正常渲染的),也没有真正去解决它,而是这个bug在公司的bug系统里挂了几天之后实在看不下去了,最终选择了绕过它……感觉自己好可耻……不过也可能和那几天的心情有关。

如果你也遇到过类似的问题,或者你对这个问题有兴趣,还有更好的解决办法,欢迎指教。