Question

我试图设计一个响应式网站。除 Safari 外，所有浏览器都能正常运行。我需要在一个居中的页面maximum-width:950px;中有两个带有固定width的侧栏和要减少的中间列，以便页面适合窗口内部。使用 Safari 时，当我减小窗口宽度时，中间列会减少，但忽略950px的体宽。以下是我使用的代码示例：

<!DOCTYPE HTML> 
<HTML>
<STYLE>
body
    {
    width:950px;
    margin:0 auto;
    padding:0;
    }
div.container
    {
    position:absolute;
    display: table;
    width:100%;
    max-width:950px;
    margin:10px;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }
div.leftColumn
    {
    display: table-cell;
    width:200px;
    border:solid 1px red;
    margin:2px;
    }
div.center
    {
    display: table-cell;
    border:solid 1px blue;
    margin:2px;
    }
div.rightColumn
    {
    display: table-cell;
    width:200px;
    border:solid 1px green;
    margin:2px;
    }
</STYLE>
<BODY>
<div class="container">
<div class="leftColumn">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, 
mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
<div class="center">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, 
mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
<div class="rightColumn">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
</div>
</BODY>
</HTML>

Answer 1

某些浏览器不支持html 5中的某些元素和样式。请查看w3 Schools以了解元素是否适用于所有浏览器。

您也可以转到Editor将html放入其中并查看其实际效果。

Answer 2

好的，问题主要是当窗口大于950px时。所以我解决了这个问题 -1：替换

  width:100%;
  max-width:950px;

通过

  width:950px;

这样当窗口大于950px时页面工作正常，这是问题发生的时候， -2：添加

@media (max-width: 950px) 
  {
  div.container
    {
    width:100%;
    }
  }

这样，该页面适用于低于950px的Windows。其他浏览器不会抱怨修复。

使用表格单元格无法使用Safari的响应式页面

2 个答案: