在开发过程中,除了偶尔的标题之外,我与之交互的大部分CSS都没有注释.结果,我养成了不评论CSS的习惯.
但是,我经常发现在我正在使用的CSS中添加注释会很有用.除了指示作者的标题之外,你应该评论CSS吗?如果是这样,怎么样?
我不是在询问如何评论的过程,而是最佳实践.
我在开发网站时发现了一些非常奇怪的东西.在尝试将div元素显示在屏幕顶部时,我注意到除了旧版本的IE之外,我没有在任何浏览器中实现所需的结果.为了测试一些不同的代码,而不是删除错误的行,我使用'//'来评论它(我真的不确定它是否适用于css)但是发生了什么,兼容的浏览器使用了未注释的代码,而IE使用标记为'//'的代码.这是代码:
#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block; // browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}
Run Code Online (Sandbox Code Playgroud)
所以基本上,似乎//可以用来指示较新的浏览器忽略特定的代码行,并指示旧版本的IE使用它?如果这是常见的做法,请告诉我.它肯定会使旧版浏览器的开发变得更加容易
我有一个嵌套的flexbox布局(使用bootstrap v4),它根据横向/纵向模式改变方向.第一级div(由flexbox使用order属性放置)#no,包含5个用作按钮的图标.该order属性不能像我期望的那样在这些图标上工作.
如果我不使用order属性,图标按自然顺序排列; 但是,如果我尝试使用该order属性进行布局,则不起作用.在代码中,info-div(order:3)应该是最后一个元素.事实并非如此.我可以通过改变源中的顺序来获得我想要的订单; 但是,我想澄清一下我的误解.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait of New York</title>
<style>
html, body {
width:100%;
height:100%;
}
#container {
height: 100%; width:100%;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: center; -webkit-justify-content: center;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
} …Run Code Online (Sandbox Code Playgroud)