html - Chrome,Safari 忽略表格中的最大宽度

标签 html google-chrome safari scaling

我有这样的 HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html> 

问题是 Chrome 和 Safari 忽略了 "max-width:1000px" 我的 friend 发现我们可以通过为内表添加 "display:block" 来阻止它,并且它以某种方式起作用。

那么,我想知道的是 - 有没有其他方法可以解决这个问题,为什么会这样?

最佳答案

最大宽度适用于 block elements . <table>既不是 block nor inline .够暧昧吗?哈哈。您可以使用 display:block; max-width:1000px忘记width:100% . Chrome 和 Safari 遵守规则!

2017 年 5 月编辑:请注意,此评论是 7 年前(2010 年!)发表的。我怀疑这些年来浏览器发生了很多变化(我不知道,我不再做网页设计了)。我建议使用更新的解决方案。

关于html - Chrome,Safari 忽略表格中的最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4019604/

相关文章:

javascript - chrome.webrequest.onCompleted 与 chrome.runtime.onMessage 竞赛

javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮

javascript - JavaScript 代码块有时会引发错误

html - 证明内容 : flex-end; align-items: flex-end; 的 Safari 问题

iphone - 在 iOS 上禁用输入文本颜色

html - 如何确保一个 radio 表格不检查另一个 radio 表格

javascript - 获取错误的 Canvas 高度

html - 反转内联 block 的顺序?

javascript - 在父级上鼠标悬停后防止子级单击?

iframe - 如何在谷歌浏览器中创建侧边栏(右侧)?