最近总是有客户反映,网站商铺格式错乱,联系方式样式总被打乱,不知道是什么原因导致的形式严重变型,把我给折磨的,查看模板,模板没有问题,查看css也没有问题,格式使用的百分号,按理说就没有问题了,可是偏偏它就是给你捣乱。
后来经过一番折腾,使用账号测试不同的商铺模板,一个一个的测试,终于,皇天不负有心人,我测试出了问题,问题是找到了,但新的问题又出现了,是table表单格式字符串太长导致的这个原因,如图:
根据情况,我搜索了一下,使用table-layout:fixed 属性,这里可以参考谷歌给出的详解:
table-layout:fixed 属性的解说
abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
但是使用它在不同浏览器中又会出现问题,显示效果整齐了,确显示内容被覆盖了,这又怎样解决呢,我又开始了搜索,可以强制换行,却又导致有的单词被分家了连不起来,后来有在表单格式中加了一句word-wrap:break-word,详细内容如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
加这句话 style="word-wrap:break-word;table-layout: fixed;",上面的问题就解决了。希望对大家有意!!!!!