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

【问题标题】：CSS - Styling seems to hamper URL display in FirefoxCSS - 样式似乎妨碍了 Firefox 中的 URL 显示
【发布时间】：2010-11-06 20:44:48
【问题描述】：

在下面的代码中，$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;
     }

【问题讨论】：

此信息会帮助那些第一次尝试帮助您的人：stackoverflow.com/questions/1060202/…

标签： html css firefox

【解决方案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;

好多了，对吧？

【讨论】：

问题是，我只希望 URL 显示其前 535 个像素。之后，我希望它被隐藏
我去掉了 links2 的 10px 宽度，它看起来很棒，直到我尝试了超过 535 像素的东西，整个列最终都超过了 535，从而改变了我的表格设计。所以我尝试使用 width: 535px;在 links2 上，它看起来很棒，并在 Firefox 中显示了完整的 URL。所以现在可以接受了。但是，它确实改变了一件事：现在整个表格单元格是一个超链接，我希望只有 URL 是一个超链接。知道我该怎么做吗？谢谢。
就缩进而言，我发现正确缩进的 HTML 与不正确缩进的 HTML 一样难以阅读。实际上，我更喜欢所有内容都保持合理，因为这样可以在屏幕上显示更多代码。
John：我向你保证，大约 99% 的程序员如果拿到你现在正在编写的代码，他们会想要追捕你。如果您不希望它缩进，至少保留 heredoc 语法，这样您就不必转义引号并在单引号和双引号之间切换以添加属性等。这只是更好的做法，这不是意见。
就宽度而言，这对我来说不会发生。

【解决方案2】：

测试一下这个尝试

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

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

【讨论】：