html - Windows Phone Internet Explorer 在一个 td 中放大文本

Question

问题是，我有 3 个 td 的内容表，边 td 宽 200 像素，中间一个宽度未定义，在计算机浏览器(甚至 Internet Explorer)上一切看起来都很棒，但在测试时在 Windows Phone 浏览器上，中间的 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>

Answer 1

感谢 Mousey 的帮助，并指出之前回答过的问题。如果我不使用几个固定位置的对象，但为设备宽度设置视口(viewport)可能会有所帮助，但添加

    -ms-text-size-adjust: none;

在不搞乱任何其他内容的情况下修复文本大小问题。