个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有以下代码，当屏幕宽度小于特定数字时，我希望单元格折叠。
通常我习惯于使用 IE 遇到问题，但在这种情况下，IE 和 Firefox 都运行良好，Chrome 不会对我尝试做的事情使用react。
有什么想法吗？
我的代码是:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
@media screen and (max-width: 432px) {
.dynTd {display: block;}
}
</style>
</head>
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email@email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br>
Company Address<br>
Zip code and City<br>
<div style="font-size: 5px;"> </div>
<a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
</td>
</tr>
</table>
</html>最佳答案
根据 Tables 将 td 变成一个 block ，同时保留 tr 原样将导致浏览器进行补偿。规范，
If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
并且带有 display:block 的 td 元素不再是“table-cell”了!
因此，浏览器创建了这样一个匿名表格单元格。显然，Chrome 以不同于 FF 和 IE 的方式实现这一点。
解决方案是确保这种情况不会发生；例如，将表格中的所有元素转换为 block，这样就不需要匿名表格单元格了。
@media screen and (max-width: 432px) {
table, tr, td {display: block;}
}<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email@email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br> Company Address<br> Zip code and City<br>
<div style="font-size: 5px;"> </div>
<a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
</td>
</tr>
</table>这在所有浏览器中看起来都一样。您可以努力找到一种方法，使其再次看起来像您想要的样子...
关于css - @media 代码似乎在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44266091/
25
4
0
谁能帮我解决这个问题？我有一个 Tomcat 和简单的 JSF 应用程序:https://github.com/gooamoko/jsfbilling/ .当我在 Tomcat 上运行应用程序时，它运
我有两个这样的域类，第一个是 Manager : package com.mnm class Manager { String name; static hasMany = [ pro
当我运行以下代码时，打印输出似乎不正确。 void thread_Calc(int *pos) { printf("recieved %d\n", *pos); sig = -1; man
这个问题在这里已经有了答案: How to access a local variable from a different function using pointers? (10 个答案) 关闭
我编写了一个程序，其中列表构建器方法返回 IEnumerable of string，其中包括大量字符串(100 万个项目)，我将其存储在 List of string 中，然后它将所有项目附加到 中
我正在尝试编写一个 IRC 类型的聊天客户端，它具有可以连接到服务器的客户端。我试图让它在本地 atm 上工作(使用 FIFOS 而不是套接字)。 我遇到了以下我似乎无法解决的问题: 接受新的客户端连
我的一个 cronjobs 每天发送一封电子邮件 35 6 * * * cd $EZPUBLISHROOT && $PHP runcronjobs.php -q 2>&1 我停止使用 cron sud
我使用 WPF 打印路径来处理在我们的应用程序中创建的大型图表。整个图表由视觉效果组成。 所谓的“DesignerPaginator”对图表进行分页(非常简单)。 从这一点来说，我做了以下三件事: -
我尝试在更新之前跟踪系统应用程序并使用: public static boolean isSystemApplication(Context ctx, IContent content) {
我在这里附上了一个查询分析结果，https://explain.depesz.com/s/x9BN 这是查询 EXPLAIN ANALYZE SELECT branche
我正在做一个 CXF(spring) 项目 (HUB)。部署后，我可以看到肥皂和休息服务列表，我通过两个地址打开它。一种是使用本地主机，第二种是使用我电脑的 ip。所以我得到了这些输出。 使用本地主机
这是一个 AnyHashable 不支持枚举转换的简单案例。 enum testEnum: String { case Test } let myObject: AnyHashable = t
我的主要目标是比较存储在数据库和 XLSX 文件中的数据。 为此，我按以下方式创建了两个列表: private class ProductList { public string produc
我从 CMake 3.6 更新到任何最新版本 (3.12.0-rc2)，现在我的一个程序无法编译。 奇怪的是，错误消息显示了标准库本身中的 undefined symbol 。这是错误消息: Unde
我希望将我的自定义对话框动画化为从特定点出现，但我无法为对话框设置动画。 该对话框是一个基本的 RelativeLayout，设置为 extends Dialog 类中的布局。 正如这里的一些答案所建
我已经在这个论坛上调查过很多类似的问题，但似乎没有一个能解决我的问题。 我会在底部列出我在这个论坛上看到的一些问题页面，但让我先谈谈我对这个问题的看法。 我正在使用 codeigniter v 2.x
我正在尝试在 RHEL 7 上启动一个 docker-compose 项目作为 systemd 服务。这是我的 systemd 脚本 (/etc/systemd/system/wp.service):
这个问题已经有答案了: "Notice: Undefined variable", "Notice: Undefined index", "Warning: Undefined array key",
我正在尝试在 RHEL 7 上启动一个 docker-compose 项目作为 systemd 服务。这是我的 systemd 脚本 (/etc/systemd/system/wp.service):
此问题出现在my last question here之后。我想将每个按钮聚焦和失去焦点背景设置为主菜单(ContentPane 即 JPanel)下方的背景颜色，因此按钮看起来像选项卡。它在不同的环
我是一名优秀的程序员,十分优秀！