Windows phone internet explorer 在一个 td 中放大文本答案

【问题标题】：Windows phone internet explorer enlarge text in one tdWindows phone internet explorer 在一个 td 中放大文本
【发布时间】：2015-08-04 10:44:39
【问题描述】：

问题是，我有 3 个 td 的内容表，边 td 是 200px 宽，中间一个宽度没有定义，在计算机浏览器（甚至 Internet Explorer）上一切似乎都很好，但是在测试时在 Windows 手机浏览器上，中间的 td 文本要大得多，我会说它应该是两倍大，但似乎没有什么可以解决这个问题，是的，我尝试在 css 中将字体大小值写入它，但这并没有似乎有什么不同。

抱歉，由于电源按钮损坏，我无法提供 Windows Phone 的屏幕截图，我使用的是标准 Windows Phone 8.1 Internet Explorer。

表格的CSS

#content_table {
    width: 1024px;
    border-spacing: 0;
    margin-bottom: 30px;
    border-collapse: collapse;
    table-layout: fixed;
}

#content_table td:not(:last-child) {
    padding: 0 15px 0 0;
}

#content_table #side_content {
    width: 200px;
    vertical-align:top;
}

#content_table #main_content {
    width: 100%;
    vertical-align:top;
    font-size: 16px;
}

.side_content_title {
    background: #c9cbce;
    border-top: solid 2px #535f7c;
    border-bottom: solid 2px #535f7c;
    text-align:center;
    width: 200px;
    color: #353c4c;
    padding: 2px 0;
}

.side_content {
    background: rgba(243,243,243,1);
    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    width: 190px;
    padding: 5px;
    border-bottom: solid 2px #535f7c;
    color: #535f7c;
}

.main_content_title {
    background: #c9cbce;
    border-top: solid 2px #535f7c;
    border-bottom: solid 2px #535f7c;
    padding: 2px 0 2px 30px;
    color: #353c4c;
}

.main_content {
    background: rgba(243,243,243,1);
    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    padding: 5px;
    border-bottom: solid 2px #535f7c;
    color: #535f7c;
}

HTML 部分

<table id="content_table">
    <tbody>
        <tr>
            <td id="side_content">
                <div class="side_content_title">title</div>
                <div class="side_content"><br/><br/></div>
            </td>
            <td id="main_content">
                <div class="main_content_title">title</div>
                <div class="main_content">
                    Lorem ipsum<br/><br/>
                </div>
            </td>
            <td id="side_content">
                <div class="side_content_title">title</div>
                <div class="side_content"><br/><br/></div>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

您能否提供屏幕截图和代码，以便我们查看您的问题？另外，您在 Windows 手机上使用的是什么浏览器，假设这是一个基于 Web 的问题？
@Dorvalla 很抱歉我不能包含屏幕截图，但我用 CSS 和 HTML 代码编辑了我的主要帖子
您使用的是什么屏幕尺寸？此外，此 width 将超过您的屏幕尺寸#content_table { width: 1024px; 这将让您查看任何屏幕尺寸，然后您可以截屏。新用户无法添加图片，但可以链接到已上传的图片quirktools.com/screenfly
您有响应式 css 文件或任何其他 css 文件吗？
@Mousey 我没有使用响应式 css 文件这个模板更适合计算机用户，但是虽然我没有制作响应式模板，但它也适用于手机用户，而且 td 非常大文字可能很恶心。我在我的电脑上使用的是 1920x1080 分辨率，如果我从手机上的 screenfly 访问网站，这一切看起来就像在没有超大文本的电脑上一样正常

标签： html css windows-phone

【解决方案1】：

感谢 Mousey 的帮助，并指出之前回答的问题。如果我不使用几个固定位置的对象，但添加

    -ms-text-size-adjust: none;

解决正文大小问题而不会弄乱其他任何东西。

【讨论】：

【解决方案2】：

在body标签或主表中使用belo代码

-ms-text-size-adjust: none;

【讨论】：

您直接从我给您的链接中粘贴代码作为答案？通常，如果这是一件小事，您会在 SO 上创建评论而不是答案。（您可以对自己的帖子发表评论）

【解决方案3】：

从此代码中删除行 font-size: 16px; 应该会呈现所有 <td> 使用相同的字体大小

#content_table #main_content {
  width: 100%;
  vertical-align:top;
 }

我认为您发现手机会在较小的设备上自动缩小字体 - 除非在代码中手动指定。 16px 在手机上看起来很大。

设置 view-port 也可能有所帮助 - 请参阅 HTML CSS - Font size oversized when shown on windows phone 了解 windows phone 上的字体大小问题

Edit 从上面的链接中，使用它修复了 EDWcode 所述的问题。

-ms-text-size-adjust: none;

【讨论】：

在看到可能的解决方案存在问题后，我在其中添加了 font-size ，但这并没有奏效。视口似乎修复了与文本大小相关的问题，但也会弄乱固定的元素。