css 样式属性与计算属性差异 错误
前人做的框架，然后项目中发现一个bug不知道怎么解决，请教各位！
具体如下：
js生产dom元素
var html = [
"<table class = 'stop-point-table' style = 'width: 250px; table-layout: fixed;'>",
"<tr>",
"<th style = 'width: 90px; text-align: right;'>停车开始时间：</th>",
"<td>" + _startPoint.sendTime + "</td>",
"</tr>",
"<tr>",
"<th style = 'width: 90px; text-align: right;'>停车结束时间：</th>",
"<td>" + _endPoint.sendTime + "</td>",
"</tr>",
"<tr>",
"<th style = 'width: 90px; text-align: right;'>时长：</th>",
"<td>" + (d / 1000 / 60).toFixed(0) + " 分钟</td>",
"</tr>",
"<tr>",
"<th style = 'width: 90px; text-align: right;'>经纬度：</th>",
"<td>" + Number(_startPoint.longitude).toFixed(6) + "," + Number(_startPoint.latitude).toFixed(6) + "</td>",
"</tr>",
"</table>"
].join("");然后看页面，dom顺利生成
但是样式不对，大家看到js中 th宽度是90px,接着看审查元素 可以看到90px确实生效了，如果无效应该有一个横线划掉，对不？接着看计算后属性 渲染成183px了，而且这是谷歌的效果，用火狐的话宽度计算后变成210多，没有留图不知道大家遇到过没有，还是这个问题很小白？
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
遇到样式在不同浏览器中表现不一致的问题，通常是因为浏览器对CSS的默认样式设置和解析方式有细微差别。针对你描述的情况，有几个可能的原因和解决办法：
-
内联样式优先级：首先确认是否有其他CSS规则（如外部样式表、内部样式或更具体的CSS选择器）覆盖了你的
th元素宽度。内联样式虽然优先级较高，但某些情况下仍可能被其他更高权重的样式覆盖。 -
盒模型差异：不同的浏览器对于盒模型（content-box, padding-box, border-box）的默认处理可能不同。检查是否为
th元素设置了边框(border)或内边距(padding)，这些都会影响最终的渲染宽度。使用box-sizing: border-box;可以确保边框和内边距包含在设定的宽度内，避免这种意外增长。 -
继承与默认值：浏览器对未明确指定的样式属性会有自己的默认值，这可能导致在不同浏览器间显示不一。确保所有必要的样式都已明确设置，减少浏览器默认行为的影响。
-
浏览器兼容性问题：部分CSS特性在不同浏览器中的支持程度和实现细节有差异。使用像Can I Use这样的工具来检查你使用的CSS特性在目标浏览器中的兼容性。
-
重置CSS样式：在项目开始时使用CSS Reset或Normalize.css可以帮助消除浏览器之间的默认样式差异，提供一个统一的起点。
针对你的情况，你可以尝试以下代码调整：
var html = [
"<style>",
" th {",
" width: 90px;",
" box-sizing: border-box;",
" }",
"</style>",
// 原有的HTML字符串...
].join("");
这段代码在生成DOM之前先插入了一个内联样式，确保了th元素的宽度设置，并应用了box-sizing: border-box;以包含边框和内边距在内。然后继续添加你的HTML结构。
如果问题依旧，建议使用开发者工具详细检查影响元素宽度的所有CSS规则，包括计算后的样式，以及考虑是否存在浮动、定位或其他布局属性导致的意外影响。
