7

短版


你知道有什么方法可以让输入按钮(提交)和锚标记使用 CSS 而没有 Javascript 在视觉上呈现相同的内容吗?

长版


我正在开发一个 ASP.NET MVC 应用程序。该站点包含查看详细信息或创建或更新我的模型的页面。页面操作包含在表单的底部,通常包括UpdateCancelEditDeleteList(如果在详细信息视图页面上)。UpdateEditDelete操作将数据从表单发布到服务器,而CancelList动作是/可以由适当的 GET 请求处理。重要的是要注意,我的设计目标之一是在禁用 Javascript 时使站点尽可能地工作,就像启用 Javascript 时那样。我还希望 UI 元素在视觉上呈现相同的元素,无论该元素是导致回发还是触发 GET 请求。

为了让表单提交在没有 Javascript 的情况下工作,我想我必须使用提交按钮。我用 CSS 覆盖了按钮的视觉样式,以呈现很像 SO 页面顶部的“按钮”——平面、纯色和纯文本。我希望使用锚标记处理生成 GET 请求的操作,但是我无法让这些标记和样式按钮以相同的方式呈现。对齐和字体大小似乎存在问题。我能够让它们接近但不完全相同。

编辑使用按钮和锚的样式差异包括无法让字体在边界框内相对于基线的相同位置呈现,以及让边界框本身以相对于容器的相同大小和对齐方式呈现。无论我如何调整,事情都只是以一种或另一种方式偏离了几个像素。如果你能够让它工作,请告诉我。知道这是可能的,会让我更容易继续尝试,直到我让它发挥作用。

我尝试过的一件事是将 GET 操作包裹在一个按钮上,其样式类似于表单按钮。这在 Firefox 中效果很好,但在 IE7 中却不行。在 IE7 中单击此类按钮不会将单击传播回锚点。我现在想出的是为 GET 创建一个新表单,使用 method="GET",与所需的操作相关联。我将它包裹在一个提交按钮周围,该按钮具有一个 onclick 处理程序,该处理程序设置location.href为所需操作的 URL。即使表单嵌套在另一个表单中,这在视觉上呈现相同并且似乎可以工作。一个小问题是,如果禁用了 Javascript,那么我的 GET url?在末尾包含 a 而不是您想要的漂亮干净的 url。

我想知道的是,是否有其他人以不同的方式解决了这个问题,效果更好(并且可能需要更少的 HTML)?你有什么我可以尝试的其他想法吗??当关闭Javascript时将请求作为帖子提交时,有什么方法可以修复GET url?

下面的示例代码来自详细信息视图。我意识到我也可以(并且可以说应该)通过 javascript 添加 onclick 处理程序,但是当我内联执行时,代码实际上读起来更好。我正在使用 HtmlHelper 扩展来生成下面的所有标记。我已经重新格式化它以提高可读性。

    <form action="../Edit/2" class="inline-form" method="get">
        <input class="button"
               onclick="location.href='../Edit/2';return false;"
               value="Edit"
               type="submit" />
    </form>
    <form action="../Delete/2" class="inline-form" method="post">
         <input class="button"
                value="Delete"
                type="submit" />
    </form>
    <form action="../List" class="inline-form" method="get">
        <input class="button"
               onclick="location.href='../List';return false;"
               value="List Donors"
               type="submit" />
    </form>
4

1 回答 1

10

您应该查看这篇关于设置按钮标签样式的文章。它包括用于呈现两者的 CSS 和相似的标签,并且具有允许按钮中的图标的副作用。

于 2009-02-13T21:17:21.613 回答