Question

我有一个超级简单的网站，我正在尝试使用jquery。我是一个CSS样式表，但有些属性被忽略了。例如，我设置了padding和border-radius属性。我检查了浏览器（firefox，虽然chrome是一样的）：

解析＆＃39; padding＆＃39;的值时出错。宣言下降。 stylesheet.css中：26：12

解析＆＃39; border-radius＆＃39;的值时出错。宣言下降。 stylesheet.css中：28：15

解析＆＃39; border-radius＆＃39;的值时出错。宣言下降。 stylesheet.css中：33：15

解析＆＃39; width＆＃39;的值时出错。宣言下降。 stylesheet.css中：40：7

解析＆＃39; height＆＃39;的值时出错。声明被撤销。

甚至宽度和高度，我实际上设法为其他一些div设置！它似乎完全随机，有些属性无法解析，例如border-radius。

所以结果（下面的代码段）看起来像这样：

＆＃13;

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

$(document).ready(function() {
   $('.square').mouseenter(function() {
       $(this).animate({
           width: '+=30px'
       });
   });
   $('.square').mouseleave(function() {
       $(this).animate({
           width: '-=30px'
       });
   });
   $('.square').click(function() {
       $(this).toggle(1000);
   });
   
   var size = 10;
   var graphData = [new Array(size),new Array(size)];
   
   var column1 = graphData[0];
   var column2 = graphData[1];
   
   column1[0] = "Data1";
   column2[0] = "Data2";
   
   for (i = 1; i < column1.length; i++) {
	   column1[i] = i;
	   column2[i] = 2*i;
	}
   
   var chart = c3.generate({
	    bindto: '#chart',
	    data: {
	        columns: [
	            ['Data set 1'].concat(column1),
	            ['Data set 2'].concat(column2)
	        ],
	        types: {
		        'Data set 1': "step",
		        'Data set 2': "step"
	        }
	    }
	});
   
   
   
});

function drawBasic() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');
    
  
    var size = 40;
    var column1 = new Array(size);
    
    var last = 0;
    for (i = 0; i < column1.length; i++) {
    	var newn = last + (0.5 - Math.random());
 	   column1[i] = [i,newn];
 	   last = newn;
 	}
    data.addRows(column1);


    var options = { 
      hAxis: {
        title: 'Time2'
      },	
      vAxis: {
        title: 'Popularity'
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }

＆＃13;

@CHARSET "ISO-8859-1";

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

.blockspace {
	height:70px;
    width:400px;
    
    margin-left:auto;
    margin-right:auto;
    
    padding:10;
    
	border-radius:10;
	background-color:#c8d8e8;
}

.square {
	border-radius:10;
	height:50px;
    width:50px;
    display: inline-block;
}

.chart {
	width:350;
	height:300;
	display:inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">
	<title>Hello World!</title>
	
	<!-- Load c3.css -->
	<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
	<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
	<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
	<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
	
	<!-- Load d3.js and c3.js -->
	<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="libraries/c3-0.4.10/c3.min.js"></script>
	<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
      
	
	<!-- Load jquery and script -->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<h1>A big hello</h1>
	<p>Why don't you enjoy these coloured squares:</p>
	<div class="blockspace">
		<div class="square" id="red"></div>
		<div class="square" id="blue"></div>
		<div class="square" id="yellow"></div>
		<div class="square" id="green"></div>
	</div>
	
	<div class="chartExperiments">
		<div class="chart" id="chart"></div>
		<div class="chart" id="chart_div"></div>
	</div>
</body>
</html>

＆＃13;

Answer 1

您忘记定义度量单位，因此只需添加度量单位即可解决问题。

.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}

.square {
    border-radius:10px; <--px unit of measure
    height:50px;
    width:50px;
    display: inline-block;
}

解析＆＃39; border-radius＆＃39;的值时出错。宣言下降。（和其他人）

1 个答案:

解析＆＃39; border-radius＆＃39;的值时出错。宣言下降。 （和其他人）

1 个答案:

解析＆＃39; border-radius＆＃39;的值时出错。宣言下降。（和其他人）