时间输入字段间距问题答案

【问题标题】：Time Input Field spacing issue时间输入字段间距问题
【发布时间】：2012-10-17 14:26:26
【问题描述】：

我正在使用 IE8 并在 Orbeon 3.9 CE 版 Sandbox 中运行表单。我观察到在 IE8 上显示字段中的内容时，时间输入字段有一个小问题。输入日期后，表单会格式化日期并添加a.m 或p.m 到结尾，但整个信息只是覆盖在字段最右侧的时间图像上。请参阅下面的屏幕截图。

但是，此问题不会在较低版本的 IE 上发生。我在兼容性视图中启动了表单，但看不到问题。

此外，仅当我拥有自定义字体和大小时才会出现此问题。由于整个应用程序使用标准字体和大小，我也必须在 Orbeon 表单中使用它。

下面是示例代码

<xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
    xmlns:f="http://orbeon.org/oxf/xml/formatting"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    >

    <xhtml:head>

        <style type="text/css">
            input {
                font-size: .95em;
                vertical-align:top;
                font-family: monospace !important;
            }
        </style>
        <xforms:model xmlns:xforms="http://www.w3.org/2002/xforms"
                xmlns:xs="http://www.w3.org/2001/XMLSchema" id="main-model" >

          <xforms:instance id="form-instance">
            <form>
              <field-1></field-1>
            </form>
          </xforms:instance>

          <xforms:bind id="field-1" nodeset="instance('form-instance')/field-1" type="xforms:time"/>

        </xforms:model>
    </xhtml:head>

    <xhtml:body>

      <table>
        <tr>
            <td>
                Enter Time: 
            </td>
            <td>
                <xforms:input bind="field-1" id="field-1-id" /> 
            </td>
        </tr>
      </table>

    </xhtml:body>
</xhtml:html>

在这段代码中，如果我们删除样式它工作正常，但我应该使用它。因此，对于我已确定使用以下 css 的解决方法

.xforms-type-time { width:115px !important; }

那么，总结一下，Orbeon 表单引擎有什么可以改进的地方吗？

【问题讨论】：

标签： xml input orbeon xforms

【解决方案1】：

默认情况下，控件的宽度设置为8em。在我在这里的测试中，IE7 确实比 IE8 和 Chrome 显示的范围更广，但这些浏览器仍有足够的空间。如果您的 CSS 输入变得太窄，那么您可以按照您的建议覆盖默认 CSS 以使其更宽。

【讨论】：