在2列布局中截断的文本

Question

我正在使用以下代码来允许文本流到第二列。一切都很好，除了在第一列的底部切掉字母的顶部，其余部分出现在第二列的顶部。

.two-column-flow { 
column-count: 2; 
column-gap: 20px; 
-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
height: 150px; 
padding-bottom: 10px; 
} 

单击页面左侧的“功能”选项卡，然后查看“娱乐”部分查看我在说什么。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

任何帮助是极大的赞赏:)

Answer 1

我刚刚检查Windows上的Chrome，Firefox和IE这个问题产生不同的结果 - 就像你所描述的，在IE浏览器中的文本是在Chrome切断（最后两行 - “游戏室”和“VCR”），在Firefox中，2列只显示为一列，整个副本应显示在第二列“娱乐“覆盖下面”通信“部分的副本，最后一个覆盖”宽带接入“的条目”VCR“。
我能解决这个问题的两个调整上述所有的浏览器：去除“display:inline-block;”为“.text-wrap”（style.css文件中的线351），并在style.css中增加height:150px;到height:200px;类“.two-column-flow”（行109 ）。
因为我不知道这些样式是否在网站的其他地方使用，我不确定这些调整是否会导致其他问题，但如果这样可以解决当前问题，则可以将特定类添加到娱乐部分，并只将这些变化应用于此类。

更新：对于第一行文本不一致的后续问题，我刚刚找到了一个解决方案（再次 - “只”在Windows Firefox，Chrome和IE上测试） - 改变类的填充。文本换行（在style.css文件线351）：

.text-wrap 
{ 
    padding: 0 2% 30px; 
} 

到

.text-wrap 
{ 
    padding: 0 0 30px; 
} 

则第一行被显示再次对准。
如前所述，我不确定您网站上其他版块可能带来的后果，因此可以考虑应用所有更改来解决2列版式的问题，例如，具有两个类.text-wrap和.pre-wrapped-text部分（用于完整性那将会.text-wrap.pre-wrapped-text没有空格）或到.two-column-flow .text-wrap（具有.text-wrap类，并且元件相.two-column-flow类儿童=元素）。

虽然我在检查这个问题时，我只注意到Internet Explorer上的另一个问题 - 您的 header .ribbon是“破损”，这意味着“关于我们聊天我的帐户”导航不显示在主导航上方的一行中，但在右侧上方 - “联系”，“聊天”上方的“联系”和“我的帐户”重叠的“关于我们”。这可以很容易地解决 - 这是由IE无法处理的设置width: initial;造成的。为了解决这个问题，并且不会对其他浏览器造成任何问题，只需在width: initial;之前加上width: auto;即可。 IE识别width: auto;并且导航是固定的，其他浏览器 - 识别两个宽度设置 - 将忽略第一个宽度设置并使用width: initial;。这适用于2个设置：header .ribbon（第42行）和.ribbon ul（第47行）。作为例子为header .ribbon（意味着要取代所有不，只需添加width: auto;）：

header .ribbon 
{ 
    width: auto; // for IE 
    width: initial; // for the rest, will be ignored by IE 
} 

至于提到的IE发出参考：use initial width for element not working in IE