个人中心
gpt4 book ai didi

css - 解析 'border-radius' 的值时出错。声明掉了。 (和别的)

转载 作者：太空宇宙 更新时间：2023-11-03 23:13:31 25 4
gpt4 key购买 nike

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

Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12

Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15

Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15

Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7

Error in parsing value for 'height'. Declaration dropped.

甚至宽度和高度，我实际上已经设法为其他一些 div 设置了!看起来完全是随机的，有些属性只是没有被解析，例如 border-radius。

所以结果(下面的片段)看起来像这样: enter image description here 

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);
  }
@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;
}
<!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>

最佳答案

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

.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;
}

关于css - 解析 'border-radius' 的值时出错。声明掉了。 (和别的)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31659895/

25 4 0
文章推荐： javascript - 如何动态定义 HTML 元素的宽度
文章推荐： c# - 创建富文本模板
文章推荐： c# - 由 ScrollView 和按钮组成的 Unity3D 列表 - 如何删除项目？
文章推荐： javascript - 缩小效果问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com