代码之家 › 专栏 › 技术社区 › coding4fun

HTML布局、ASP.Net、浏览器差异……必须有更好的方法

html-table cross-browser asp.net html

coding4fun · 技术社区 · 15 年前

今天我的任务是对我们的一些网络表单进行一些重大的设计更改。书页乱七八糟!大多数对齐是使用嵌套表完成的。我把所有东西都弄对了,在IE7里看起来很好。我们的网站说我们支持Firefox和;所以我试着将它加载到Firefox(最新版本)中,结果它看起来一团糟。一开始我想…browsercaps不能安装在我机器上的machine.config中(它的维护方式本身就是一团乱,所以我去了codeproject,不幸的是我认为它是在那里维护的,并得到了最新版本(我认为是2006年的)这没什么区别。所以我尝试了很多不同的浏览器:Opera、Chrome和Safari。它们看起来略有不同,但在可接受的范围内。Firefox确实是唯一一个看起来一团糟的浏览器。因此,在尝试了各种不同的布局选项之后(很多都适用于所有浏览器,但不适用于Firefox)我感到非常沮丧,准备拔出我的小头发。

经历了这一切之后……我想一定有更好的办法!如何使用表格进行精确布局?浏览器呈现有很多不同之处,特别是当您的布局要求非常精确时(例如,有一段代码,他们试图通过在页眉部分的每个TD上使用底部边框在自定义页眉下画一条线,这是Firefox出错的几个区域之一)。我知道布局可以用CSS来完成(尽管我从来没有这样做过)。请告诉我它更独立于浏览器,或者至少给我一些提示,这样我知道我们正在编写的代码将是浏览器抱怨…我不知道这有多困难,因为有多少浏览器是100%抱怨?

如有任何建议,将不胜感激。

7 回复 | 直到 8 年前

jrista 15 年前

也就是说,CSS和基于标准的web开发肯定会有所帮助。基于标准的开发通常避免使用表格作为布局选项,并将其使用限制在表格数据中(有些人会争辩说,在基于标准的设计中,永远不应该使用表格……但是,任何一个在相当长的一段时间内从事过web开发并拥有相当技能的人都会告诉你,省去一些麻烦,并将表格用于其设计目的:表格数据……通常以行和列形式显示的信息。)

A List Apart . 它是解决所有最常见、也是许多相当模糊的web设计问题的解决方案库。

在我职业生涯的大部分时间里,我都生活在网络设计的泥潭中,我学到了一个小技巧,也许能帮到你。有趣的是,Opera实际上是我使用过的最符合标准的浏览器。它是第一个通过Acid 2测试的浏览器,也是目前唯一一个100%通过Acid 3测试的浏览器。我了解到,首先在Opera中设计和测试一个站点可以帮助我为CSS和XHTML实现一个良好的、完全符合标准的基线。一旦你有了一个在Opera中看起来很完美的网站,那么就转到Firefox、IE7/8、Chrome等等,并根据需要添加一些调整或修改,以使所有需要支持的浏览器看起来都正确无误。这样做为我节省了几个小时,有时甚至几天甚至几周的时间,让我在试图让FF和IE友好相处的过程中无所事事,但却从未真正实现任何基于标准的合规性。

Chris Thompson 15 年前

正如你所说,有更好的方法来做网页设计。然而,您正处于一个困境中,因为您正试图维护一个现有的项目。我不认为完全把它拆开并尝试从头开始是明智的。

话虽如此。我认为你仍然可以利用CSS原则来完成边界和背景之类的事情。

我建议你花些时间自学CSS和HTML。有一些好的网站,比如 w3schools.com

您甚至可能想下载AdobeDreamweaver和/或ExpressionWeb的试用版,因为它们是很好的WYSIWYG Web编辑器,内置了对CSS和基于标准的布局的支持。

Novice 15 年前

嘿,伙计,现在正是深入研究CSS和XHTML的时候;

要编写与浏览器兼容的标记(XHTML)、样式(CSS)和行为(Javascript),您需要大量的实验经验和耐心(尤其是IE)。

我遵循的金科玉律是,以firefox为基础编写标记代码,并使用其插件(如下所述)检查W3C投诉标记,对于所有浏览器中的每次更改检查,大部分时间都将用于IE中,使用CSS黑客( LINK1 )使用条件注释。。

浏览器不兼容是因为不同的浏览器对HTML的读取方式不同,而且你只需要很少的实验和工具。

HTML Validator Firefox的Firebug IE的IE开发者

一些好的文章开始

Browsers Test and tools @ Smashing Magazine UI Patterns Designing Web Forms

同时,在DOM、XHTML、CSS和web可用性方面,增强您的基础知识;有很多书(CSS精通,Eric Meyer书);网站如 a list apart , Smashingmagazine

Chris Mullins 15 年前

在我看来,Firefox是学习html和CSS的最佳工具,因为它有出色的Firebug插件。如果你安装了这个插件,它将允许你检查元素,准确地看到什么样的css样式被应用到元素,以什么样的顺序,并实时编辑它们。直到我开始使用Firebug,我才对CSS有了很好的理解。

此外,每个浏览器都包含所有html元素的默认样式。引入一个样式表可能会有所帮助,该样式表会将所有基本样式重置为设置的标准。试试谷歌reset.css你会发现很多例子。

xandy 15 年前

之前回答过的人应该提供足够的信息和细节,让您开始进行web布局工程。也许我可以和你分享一些经验。

从标准开始。换句话说,firefox中接受的大多数东西都应该符合标准(当然,您可以进行标准检查)。但是有时候你并不需要在继续之前完成所有的事情。我通常的做法是,我从页面中最大的组件开始,在firefox中,然后你可以首先修复IE中那些你拥有的东西的“漏洞”。然后在firefox中挖掘细节,然后在IE中修复这些细节,然后挖掘更多细节等等。。。。

事实上,我们在世界上只有两个阵营,一个是M$IE,另一个是W3C标准。在几乎99%的正常使用中,那些在firefox中工作的应该在safari、opera等中工作。

mmcglynn 15 年前

1) 使用 CSS property table-layout:fixed

例子:

<table cellpadding="2" cellspacing="2" style="table-layout:fixed;width:400px;">

2) 使用 COL WIDTH

<table cellpadding="2" cellspacing="2" style="table-layout:fixed;width:400px;">
<col width="50" /><col width="50" /><col width="200" /><col width="100" />

这将保持列的大小一致。

3) 避免使用 HEIGHT 表、行和单元格上的属性。

4) 使用 TBODY 对于样式,它包含元素。

<table cellpadding="2" cellspacing="2" style="table-layout: fixed; width: 400px;">
        <col width="50" />
        <col width="50" />
        <col width="200" />
        <col width="100" />
        <tbody>
            <tr>
                <td>Stuff</td>
                <td>and</td>
                <td>Nonsense</td>
                <td>!</td>
            </tr>
    </table>

tbody td {
   background-color: yellow;
}

我将把使用列与否的争论留给其他人。我不使用它们,但这并不意味着它们对于表示代码是无用的。

David Robbins 15 年前

你从这里的许多答案中得到了一些很好的建议。我想补充一点,您应该研究一个CSS网格系统,它将支持跨浏览器工作,同时减少您调整布局的时间。

960 CSS grid

您会惊讶地发现,应用CSS网格可以获得多少里程,因为它将为您提供被认为是良好布局的正确比例。