关于html兼容？

Question

想问一下，写html怎么保持不同显示器，不一致的问题？
如下图，我规定内容盒子xx像素高，在我笔记本上还正常显示，可一放教室电脑上就不行了，教室电脑显示器比较大 内容高度跟我电脑上完全不一致，要是宽度不一致还可以通过百分比，可高度设置了百分比也没用啊，这咋写，最关键的是要到教室的电脑上面讲，求指点

Answer 1

由于不同的显示器其长宽比例是不同的，你不可能要求在4:3的显示器中显示正常的页面到了16:9的显示器仍然能保持原样，所以要想让页面适应不同的显示器，必须坚持一个原则，就是宽度和高度只能选择一样，比如宽度按100%显示，则高度就只能自动（可以超出屏幕可视范围，也可以小于）；反之，如果高度按100%显示，则宽度就要自动。只有这样，宽度和高度才能保持比例不变。
高度按百分比显示无效是因为浏览器默认把可视区域的高度自动设为0了，经过下面处理即可：
html,body {width:100%; height:100%}

Answer 2

方法/步骤
　　不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。
　　因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS代码：
　　*{margin:0px;padding:0px;}
　　借于此，所有标记的内外边距被统一起来。
　　优先级问题：
　　对于同一标记属性所给定的值，有不同的优先级。其中优先级最高的是内联代码，其实是页内CSS，接下来是浏览器默认设置，最后才是外部CSS所做的限制。
　　Margin不一致的问题：
　　当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display：inline”项即可。
　　DIV居中问题：
　　通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设置与DIV一样时即可解决问题。
　　内外边框合并问题。通常情况下，对于两个相关DIV块，相邻时采用外边距合并原则，其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。
　　掌握了这一规则，在利用DIV块进行布局时我们就可以做的更加得心应手。
方法/步骤　　不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。　　因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS代码：　　*{margin:0px;padding:0px;}　　借于此，所有标记的内外边距被统一起来。　　优先级问题：　　对于同一标记属性所给定的值，有不同的优先级。其中优先级最高的是内联代码，其实是页内CSS，接下来是浏览器默认设置，最后才是外部CSS所做的限制。　　Margin不一致的问题：　　当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display：inline”项即可。　　DIV居中问题：　　通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设置与DIV一样时即可解决问题。　　内外边框合并问题。通常情况下，对于两个相关DIV块，相邻时采用外边距合并原则，其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。　　掌握了这一规则，在利用DIV块进行布局时我们就可以做的更加得心应手。

Answer 3

通过媒体查询来做显示器的适配，根据显示器不同的分辨率用不同的css样式来显示，其实在实际开发中一般是不会写固定高的，都是由内容撑的

Answer 4

方法/步骤
　　不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。
　　因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS代码：
　　*{margin:0px;padding:0px;}
　　借于此，所有标记的内外边距被统一起来。
　　优先级问题：
　　对于同一标记属性所给定的值，有不同的优先级。其中优先级最高的是内联代码，其实是页内CSS，接下来是浏览器默认设置，最后才是外部CSS所做的限制。
　　Margin不一致的问题：
　　当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display：inline”项即可。
　　DIV居中问题：
　　通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设置与DIV一样时即可解决问题。
　　内外边框合并问题。通常情况下，对于两个相关DIV块，相邻时采用外边距合并原则，其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。
　　掌握了这一规则，在利用DIV块进行布局时我们就可以做的更加得心应手。

Answer 5

这个就是响应式网站的设计方式之一了，高度按百分比显示无效是因为浏览器默认把可视区域的高度自动设为0了，经过下面处理即可：html,body {width:100%; height:100%}