html - CSS - 样式似乎妨碍了 Firefox 中的 URL 显示

Question

在下面的代码中，$row['site'] 是一个 URL。在 Chrome 和 IE8 中，它显示正常。在 Firefox 3.0.11 中，它只显示第二个正斜杠之前的所有内容。所以“en.wikipedia.org/wiki/Miami”仅显示为“en.wikipedia.org/wiki”。

我相信这是因为我使用的 CSS，但我不太清楚如何修复它。有什么想法吗？

提前致谢

约翰

代码如下:

print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".'<a href="http://'.$row['site'].'" class="links2">'.$row['site'].'</a>'."</td>";

这是 CSS:

table.navbar {
       margin-left:44px;
    margin-top:0px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif ;
    font-weight: normal;
    font-size: 12px;
    color: #000000;
    width: 700px;
    background-color: #A7E6FE;
    border: 1px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 4px;
    padding: 4px;
    text-decoration: none;    
}

table.navbar td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 16px;
}

table.navbar td a{
   padding: 3px;
   display: block;
}

.sitename { width: 535px;
            overflow:hidden;
}

a.links2:link {
     color: #000000;
    text-decoration: none;
     text-align:left;
    margin-top:6px;
    margin-bottom:2px;
    margin-left:2px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 10px;
    height: 12px;
    vertical-align:middle;
     }

Answer 1

这是“罪魁祸首”:

.sitename {
    width: 535px;
    overflow:hidden;
}

您正在将任何具有 .sitename 类的元素设置为具有特定宽度并隐藏任何溢出。

除此之外，这也是一部分原因:

a.links2:link {
    ...
    width: 10px;
    ...
}

不确定您为什么要将链接限制在这么小的宽度，但它会强制链接文本在下面环绕，然后隐藏“迈阿密”，因为溢出被​​隐藏了。

您粘贴的代码减去上面的宽度声明 gives me what you want on Firefox .

这是一个旁注，但是像打印那样打印 HTML 非常难看。忘记关闭报价并犯愚蠢的错误也非常容易，因为很难说出你在哪里。考虑 heredoc syntax :

print <<<EOT
<table class="navbar">
  <tr>
    <td class='sitename'>
      <a href="http://{$row['site']}" class="links2">{$row['site']}</a>
    </td>
EOT;

好多了，对吧？