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;

好多了，对吧？

Answer 2

测试此尝试

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

如果您看到滚动条，请尝试将宽度更改为基于“em”的数字

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

2 个答案: