javascript - CKEditor 图标垂直

Question

实时取景:http://wallingfordrodandgunclub.org/newsite/members/forum/reply.php

当我从页面中删除任何额外内容时，它显示正常。这也不是小空间，我已经测试过将它从它所在的div中取出并让它占据底部的整个页面。会不会是我的 CSS 样式干扰了它？

这是我的表格。

<FORM METHOD="post" ACTION= "<?php echo $_SERVER['PHP_SELF']; ?>?board=<?php echo $boardID ?>">
    <textarea name="editor1">
    <?php
    echo $postContent;
    ?>
    </textarea>
    <script>
        CKEDITOR.replace( 'editor1' );
    </script>
    <input TYPE="submit" NAME="submit" VALUE="Post"> <input TYPE="submit" NAME="preview" VALUE="Preview"> 
</FORM>

Answer 1

这是你的问题:

body a {
  display: block;
  text-decoration: none;
  clear: both;
}

来自 main.css 第 14 行。CKEditor 必须并排 float 这些链接，并且 clear:both 清除 float 在整个页面上的每个链接上。如此笼统地应用规则通常不是一个好主意，最好给这些链接一个类，然后专门将其应用到它们。

更新:

这是来自您的 CSS。启动 chrome 或 safari，右键单击页面上的任何链接，选择检查元素，然后从右侧的样式面板中取消选中“body a”下的“clear:both”框，一切都会恢复原位。

I was trying to remove blue links on ie from around my button links. Is there another way of doing that?

“文本修饰:无；”这一行将删除链接周围的蓝线之类的东西，如果你愿意，你可以保留它。目前导致您出现问题的唯一一行是“clear:both”，因此您可以将上面的内容更改为:

body a {
  display: block;
  text-decoration: none;
}

我通常更愿意为我页面上的所有按钮提供一个类似“菜单按钮”的类，然后将 css 更改为:

a.menu-button{
  display: block;
  text-decoration: none;
  clear: both;
}

或者将我所有的按钮嵌套在一个类似“菜单”的类中，然后将 css 更改为:

.menu a
  display: block;
  text-decoration: none;
  clear: both;
}

这样只有那些特定的元素会受到影响，而不是页面上的每个链接。