HTML 无法正确呈现

标签 html css rendering

<分区>

我正在按照 Ruby 教程制作示例应用程序。我制作了注册页面,但注册时出现的错误以一种有趣的方式呈现。错误行末尾的句点在它之前。而且星号和元素符号点在错误的行尾。

这里是页面源HTML源码:

<div class="container">
            <h1>Sign up</h1>
<div class="row">
    <div class="span6 offset3">
        <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="UPwVQbjK5hdjlsXerJfnAESR61pKf3l/K1u2/05+ILY=" /></div>
                <div id="error explanation">
        <div class="alert alert-error">
            The form contains 2 errors.
        </div>
        <ul>
                <li>* Password doesn't match confirmation</li>
                <li>* Email is invalid</li>
        </ul>
    </div>

它是这样的:

enter image description here

这是 CSS:

#error_explanation {
    color: #f00;
    ul {
        list-style: none;
        margin: 0 0 18px 0;
    }
}

另外我想提一下,输入字段也有类似的问题,输入光标位于框的右端(如阿拉伯文本)。我通过在输入文本区域 css 中添加 direction: ltr; 行解决了这个问题:

input, textarea, select, .uneditable-input {
    border: 1px solid #bbb;
    width: 100%;
    padding: 10px;
    height: auto;
    margin-bottom: 15px;
    direction: ltr;
    @include box_sizing;
}

我试图在我的 CSS 中添加方向样式,但那没有用。我想不出别的了。请告诉我哪里出错了?

最佳答案

因此,尽管@Sam 建议的方法有效,但我在网站的其他地方发现了同样的问题。我使用方向修复了其中的大部分:ltr。后来当我部署到 Heroku 时,很多事情都失败了。当我寻找解决方案时,我发现我需要在部署到 Heroku 之前预编译我的 Assets 。我正在使用 Bootstrap 。

令人惊讶的是 bundle exec rake assets:precompile 解决了本地主机和 Heroku 上的问题。

是的,问题出在 Assets 管道编译中。

关于HTML 无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15848286/

上一篇:javascript - 在 JS 提示符下获取 var - 我怎样才能通过 HTML 表单实现它?

下一篇:javascript - 弹出窗口的大小与其内容不匹配

相关文章:

php - 表单漏洞测试的典型文本

javascript - 如何使用 Javascript 加载 CSS 文件?

c++ - SDL2 没有延迟渲染

html - 如何修复 "The aria-labelledby attribute must point to an element in the same document"错误?

java - FTP 看起来像 java/HTML 中的应用程序

javascript - jQuery .not() 排除某些类的父类

javascript - 如何在使用 jQuery 加载页面后淡化 div?

html - 无法在 :hover of another <li> 上显示 <ul>

python - Matplotlib 中轴边界的渲染不正确

css - Chrome 打印的奇怪行为 - CSS 修复?