排版紧凑情况下IOS 浏览器的文字部分选中问题

一、需求

一个每一项都是图文混排的列表页，在需要对其中的某一部分文字进行选中copy的时候，IOS个二货每次都是直接选中了整个列表项，无论怎么操作它的选框都没有办法做到部分选中。

这是我本周遇到遇到的最奇葩的问题，没有之一。

二、思路

仔细思考并试验之后，找到了三个解决方案：
（一）放开页面的缩放限制，在用户把页面放大的情况下，文字选中会相对容易很多；
（二）把需要选中的文字放进input[text]，然后用oninput屏蔽掉input的输入；
（三）分析html/css研究下ios为啥总是傻傻分不清楚，只能整块整块的选中；

方案一，因为页面是在webview中展现，允许缩放会和native的整体风格不协调，并且对用户来说，交互门槛略高，选中效果也不是很理想，直接pass掉；
方案二，完美实现长按选中，部分复制。but，会不可避免的弹出系统的输入法，产品经理以体验太差直接毙掉，无奈，继续研究方案三。

变换html结构、css定位，由简到繁各种对照...过程之波折略掉一千字。

三、总结

ios的长按选择功能，是有bug的。
在html节点太密集或者有元素浮动或者文本节点间距/行高太小的时候，长按出来的选框容易把这一坨都选上，而其中的细节它傻傻分不清楚；
so：
1.外层容器与文本节点以及文本节点之间，间距或行高适当增大（以手指轻触屏幕时的压屏范围为参照，14px差不多了）；
2.外层父容器设置-webkit-user-select:text;其他无关子节点设置-webkit-user-select:none;
3.避免使用浮动；
4.外层容器避免设置行高，尤其是无单位数字取值的行高，如line-height:1；
5.避免多层嵌套；
6.容器多用绝对定位；
7.使用table布局，可以保持清晰的html结构，帮助ios识别；
8.如果是列表项，listbox设置overflow:hidden；
9.非需要选中部分尽量不要设置line-height；

结尾放一张成功之后的效果图：

.