URL內容亂七八糟的CSS佈局？

Question

我有表格佈局，其中顯示變量內容。
當我用FireFox看時，它看起來很好。
但使用Safari時，當內容包含網址時，寬度會變得混亂。

是否有任何可能的方法來解決這個問題？

DEMO http://jsfiddle.net/wyMjQ/

Safari瀏覽器，它攪亂了這樣

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
age  18 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
gen  male 
der  
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
bod  http://www.youtube.com/wa 
y  tch?v=dA8O32jE 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
tag  tag1 tag2 tag3 
s 

它應該是這樣的

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
age  18 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
gender male 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
body  http://www.youtube.com/wa 
     tch?v=dA8O32jE 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
tags  tag1 tag2 tag3 

HTML

<div class="introduction"> 
    <table> 
    <tr> 
     <th>age</th> 
     <td class="border">18</td> 
    </tr> 
    <tr> 
     <th>gender</th> 
     <td class="border">male</td> 
    </tr> 
    <tr> 
     <th class="body">body</th> 
     <td>http://www.youtube.com/watch?v=dA8O32jE</td> 
    </tr> 
    <tr> 
     <th class="tag">tags</th> 
     <td class="border"> 
     </td> 
    </tr> 
    </table>    
    </div> 

CSS

div.introduction{ 
    text-align:left; 
    margin:5px 8px; 
    overflow: hidden; 
    padding-top: 10px; 
    padding-bottom: 5px; 
    padding-left: 0px; 
    padding-right: 5px; 
    border-spacing: 0px; 
} 

table th { 
    width: 100px; 
    padding-left: 9px; 
    color: rgb(0, 0, 0); 
    font-size: 83.3%; 
    letter-spacing: 2px; 
    vertical-align:top; 
    border-top: 1px dashed rgb(191, 191, 186); 
    border-bottom: 1px dashed rgb(191, 191, 186); 
} 

table th.body { 
    height: 80px; 
} 

table th.tag { 
    height: 80px; 
} 

table td { 
    width: 140px; 
    padding-left: 9px; 
    font-size: 83.3%; 
    letter-spacing: 2px; 
    vertical-align:top; 
} 

td.border{ 
    border-top: 1px dashed rgb(191, 191, 186); 
    border-bottom: 1px dashed rgb(191, 191, 186); 
} 

Answer 1

你的100px寬度來說太小了。讓它變大。像200px。也可以嘗試使用white-space：nowrap;在你的CSS。

table th { 
    width: 200px; 
    white-space:nowrap; 
}