时间输入字段间距问题

Question

我正在使用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表格引擎中可以做出一些改进吗？

Answer 1

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